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>

这工作得比较好，但是我遇到了两个问题。

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

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

我试着做一个小提琴......但真的不知道如何正确使用它。这至少可以显示我正在尝试做的总体布局

http://jsfiddle.net/vfJtG/

编辑：

如果我仍然单击它两次，除了显示 $other 的跨度之外，一切正常，有人知道解决方法吗？

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