Question

所以当我有一个以上的模块时，我想在一个值中加上和减去它而不会影响另一个数字。

查看小提琴

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()找到此容器，然后使用input更新find()：

$('.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的任何奇怪行为。

Answer 2

您可以使用.next()和.prev()：

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
        var fieldName = $(this).data('field');
        var input = $(this).prev('input[name='+fieldName+']');
        // Get its current value
        var currentVal = parseInt(input.val());
        // If is not undefined
        if (!isNaN(currentVal)) {
            // Increment
            input.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
        var fieldName = $(this).data('field');
        var input = $(this).next('input[name='+fieldName+']');
        // Get its current value
        var currentVal = parseInt(input.val());
        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal) && currentVal > 0) {
            // Decrement one
            input.val(currentVal - 1);
        } else {
            // Otherwise put a 0 there
            input.val(0);
        }
    });
});

Example

您还会注意到我已将您的field属性更改为data-field，因为这样您就可以使用jQuery的.data()功能而不是向您的{{3}}添加无效属性输入

Answer 3

问题源于输入元素的name属性。您的所有输入元素都具有相同name quantity的值，因此在使用选择器$('input[name='+fieldName+']')时，您会收到对具有相同名称的所有输入的引用

有几种方法可以解决这个问题。

您可以为所有相关输入提供唯一的name，最好是GUID，类似于：

<input type='button' value='-' class='qtyminus' field='9056FF9E-E3ED-4F35-9E82-73796E80EA12' />
<input type='text' name='9056FF9E-E3ED-4F35-9E82-73796E80EA12' value='0' class='qty' />
<input type='button' value='+' class='qtyplus' field='9056FF9E-E3ED-4F35-9E82-73796E80EA12' />
<br>
<input type='button' value='-' class='qtyminus' field='B0B852FB-75B5-4C54-B403-A09AA75A961B' />
<input type='text' name='B0B852FB-75B5-4C54-B403-A09AA75A961B' value='0' class='qty' />
<input type='button' value='+' class='qtyplus' field='B0B852FB-75B5-4C54-B403-A09AA75A961B' />

DEMO - 使用唯一名称

您可以简单地使用jQuery的next()和prev()函数，忽略name属性（假设HTML不会更改），类似于：

$(this).prev().val(...); // for +
$(this).next().val(...); // for -

DEMO - 使用next()和prev()

您还可以添加上下文元素，对相关元素进行分组并使用jQuery的parent()和.find()函数，类似于：

$(this).parent().find('input[name='+fieldName+']');

有更多方法可以解决这个问题。

Answer 4

我已更新您的代码..

代码： -

jQuery(document).ready(function(){
    // This button will increment the value
    $('.qtyplus').click(function(e){
        // Stop acting like a button
        e.preventDefault();
        //the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var txt=$($(this).prev("input[type=text]"));
        var currentVal = parseInt(txt.val());
        // If is not undefined
        if (!isNaN(currentVal)) {
            // Increment
          txt.val(currentVal + 1);
        } else {
            // Otherwise put a 0 there
            txt.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');

         var txt=$($(this).next("input[type=text]"));
            // Get its current value
        var currentVal = parseInt(txt.val());
        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal) && currentVal > 0) {
            // Decrement one
            txt.val(currentVal - 1);
        } else {
            // Otherwise put a 0 there
           txt.val(0);
        }
    });
});

工作示例： - http://jsfiddle.net/puJ6G/1011/

感谢

按钮减去和从值添加仅影响一个

4 个答案: