2

次のスパンを更新しようとしています

<span class="help-block">Your card will automatically reload $<span id="autoAmount">0</span> when your balance is lower than your reload threshold.</span>

以下のコードから取得した値を使用して、

<div class="controls">
    <div class="btn-group radioButtons amountButtons" data-toggle="buttons-radio">
                @if (Model.PresetValues.Count > 0){
                     foreach (int value in Model.PresetValues) {
                        <button type="button" data-value="@value" class="btn amtButtons @(Model.chargeViewModel.ChargeAmount == value ? "active" : "")">$@value</button>
                     } 
                }                   
                <button type="button" data-value="other" class="btn toggleDiv toggleOnce amtButtons" data-toggle-id="#manualAmount">Other</button>
            </div>               
            <input type="hidden" class="radioHidden validate required validateAmount" value="" id="amount" name="ChargeAmount">

</div>

これから「はい」ボタンをクリックした後

<li class="control-group">
        <label for="autoReload" class="control-label">Auto Reload</label>
        <div class="controls">
            <div class="btn-group radioButtons radioToggleCollapse" data-toggle-id="#autoReloadExtra" data-toggle="buttons-radio">
                <button type="button" data-value="no" class="btn active">No</button>
                <button type="button" data-value="yes" class="btn">Yes</button>
            </div>
            <input type="hidden" class="radioHidden" value="@(Model.IsAutoReload ? "True" : "False")" id="autoReload" name="IsAutoReload">
        </div>
    </li>

次のスクリプトがあります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
    $.ajax({
        type: "POST"
    }).success(function() {
       var callAjax = $('.amtButtons').click(function () {
           $("#autoAmount").html($('#amount').val());
      });
   });       
</script>

これは比較的うまく機能しますが、2 つの問題が発生しています。

1) 値を更新するには、値を 2 回クリックする必要があります。

2) 'other' を 2 回クリックすると、$other が表示されますが、クリックしたときに 'manualAmounts' 値にあるものを表示したいと考えています。

フィドルを作ってみたのですが、使い方がよくわかりません。これは、少なくとも私がやろうとしていることの一般的なレイアウトを示すことができます

http://jsfiddle.net/vfJtG/

編集：

$other を表示するスパン以外はすべて機能しますが、それでも 2 回クリックすると、回避策を知っている人はいますか?

4

1 に答える 1

2

このFiddleを見てください。Javascript は次のとおりです。

$( document ).ready(function() {
    //Cache the selections
    var autoReloadCheck = $(".autoReloaded"),
        autoAmmount = $("#autoAmount"),
        ammount = $('#amount');

    //Replaced your two buttons with a simple checkbox
    autoReloadCheck.on('click', function(){
        if(!autoReloadCheck.is(':checked'))
            autoAmmount.html("0");
    });

    $('.amtButtons').click(function () {
        var $this = $(this); //Capture which button was clicked

        if($this.data("toggle-id") === "#manualAmount"){
             $this.data("value", $("#manualAmountInput").val()); //If the "other" was clicked, set the value according to what is in the input box
        }

        if(autoReloadCheck.is(':checked')){ //Is autoReload checked?
            autoAmmount.html($this.data("value"));
        }
    });
});

コメントに基づいて更新

新しいフィドル

var autoReloadCheck = $(".autoReloaded"),
    autoAmmount = $("#autoAmount"),
    ammount = $('#amount'),
    plusMinus = $(".plusminus"),
    otherValue = $('*[data-toggle-id="#manualAmount"]');

function updateOthervalue(newValue){
    otherValue.data("value", newValue);
    plusMinus.data("value", newValue);
    plusMinus.val(plusMinus.data("value"));
    updateReloadSpan(newValue);
}

function updateReloadSpan(newAmount){
    if(autoReloadCheck.is(':checked')){
        ammount.val(newAmount);
        autoAmmount.html(newAmount);
    }
}

autoReloadCheck.on('click', function(){
    if(!autoReloadCheck.is(':checked'))
        autoAmmount.html("0");
});

$(".minus").on('click', function() {
    if(plusMinus.data("value") >= 15){
        var newValue = otherValue.data("value") - plusMinus.data("increment");
        updateOthervalue(newValue);
    }
});

$(".plus").on('click', function() {
    if(plusMinus.data("value") < plusMinus.data("max")){
        var newValue = otherValue.data("value") + plusMinus.data("increment");
        updateOthervalue(newValue);
    }
});

$('.amtButtons').on('click', function() {
    var $this = $(this);

    if($this.data("toggle-id") === "#manualAmount"){
        $this.data("value", plusMinus.data("value"));
    }
    updateReloadSpan($this.data("value"));
});
于 2013-07-02T17:05:37.163 に答える