javascript - 按钮从值中​​减去和添加只影响一个

Question

因此，当我有多个模块时，我想在不影响另一个数字的情况下对一个值进行加减。

查看 fiddle

http://jsfiddle.net/umbriel/puJ6G/1007/

jQuery(document).ready(function(){
    // This button will increment the value
    $('.qtyplus').click(function(e){
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If is not undefined
        if (!isNaN(currentVal)) {
            // Increment
            $('input[name='+fieldName+']').val(currentVal + 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(0);
        }
    });
    // This button will decrement the value till 0
    $(".qtyminus").click(function(e) {
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal) && currentVal > 0) {
            // Decrement one
            $('input[name='+fieldName+']').val(currentVal - 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(0);
        }
    });
});

谢谢

Answer 1

您可以将每组控件分开。为此，我添加了一个包含 div 的内容:

<div class="count-container">
    <input type='button' value='-' class='qtyminus' data-field='quantity' />
    <input type='text' name='quantity' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' data-field='quantity' />
</div>

然后您可以使用 closest() 找到此容器，然后使用 find() 更新要更新的 input:

$('.qtyplus').click(function (e) {
    e.preventDefault();
    var $container = $(this).closest('.count-container');
    var $field = $container.find('input[name=' + $(this).data('field') + ']');
    var currentVal = parseInt($field.val(), 10);
    if (!isNaN(currentVal)) {
        $field.val(currentVal + 1);
    } else {
        $field.val(0);
    }
});

Updated fiddle

另请注意，我将无效的 field 属性修改为 data-field，以防止 DOM 出现任何奇怪的行为。