jQuery 在 1 次点击后更新值？

Question

我正在尝试更新以下跨度

<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>

点击"is"按钮后

<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>

这种方法效果相对较好，但是我遇到了两个问题。

1)我必须单击该值两次才能更新

2) 如果我单击“其他”两次，它会显示 $other，而我希望它在单击时显示“manualAmounts”值中的任何内容。

我尝试制作 fiddle ......但真的不知道如何正确使用它。这至少可以显示我正在尝试做的事情的总体布局

http://jsfiddle.net/vfJtG/

编辑:

除了显示 $other 的范围外，如果我仍然点击两次，一切正常，有人知道解决方法吗？

Answer 1

看看这个 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"));
        }
    });
});

根据评论更新

新fiddle

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"));
});