Question

我正在使用一个Jquery插件，它会在您选中复选框或单选按钮时汇总输入到名为data-cost的数据属性中的值。我修改了脚本，因此您可以在text input

中输入值

例如，当用户输入文本输入的值时，将触发脚本，如下所示。

<input type="text" class="balance" id="account_balance1" name="cardbalance" value=""/>

它会更改此输入中的数据属性

<input type="checkbox" checked="checked" data-cost="100" debt="" value="" name="f_2[]"/>

但是在添加了checkbox input和text input的另外9个实例后，它并没有总结右边蓝色总计框中的10个实例，如此小提琴中所示。当您第一次加载小提琴时，您将注意到它总计1000美元，直到进行更改。之后，它只是将值更改为您键入的内容，并在您输入的值的右侧添加零。

在这里，您可以看到我的修改工作示例。 http://preview.benmartinstudios.com.au/jquery-price-calculator-pro/quantities.html

这是小提琴http://jsfiddle.net/mikeef74/8jdfJ/11/

Answer 1

当输入的值发生变化时，我认为您只希望更新相关复选框上的data-属性。您正在更新所有复选框上的值。

像这样：

$('.balance').on('keyup blur paste', function() {
    var $self = $(this),
        $checkbox = $self.closest('li').find('input:checkbox');
    setTimeout(function() {
        var str = $self.val();
        $checkbox.data('cost',str.replace(/^\$/, ''));
        $checkbox.data('debt',str.replace(/^\$/, ''));
        calculateTotalFor();
    }, 0)
});

jsfiddle

Answer 2

我会说你应该像这样添加事件委托：

 $('.well').on('keyup blur paste', '.balance', function() {
               var self = $(this);
           setTimeout(function() {
               var str = $(self).val();
               $("input[data-cost][debt]").data('cost',str.replace(/^\$/, ''));
               $("input[data-cost][debt]").data('debt',str.replace(/^\$/, ''));
               calculateTotalFor();
           }, 0)
});

我修改它后，Jquery计算脚本无法正常工作

2 个答案: