Jquery to target .this element not global

Question

我正在使用下面的代码（不是我的），我正在尝试让增量按钮仅针对它们相关的形式。但是，当您有多个表单（如下所示）时，增量框会增加页面上的两个（所有）输入框。

如何仅定位我正在使用的表单？

我确定这是一个简单的修复，但我无法弄清楚！请帮忙！

提前感谢一百万！

埃利奥特。

<form id='myform' method='POST' action='#'>
    <input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' name='quantity' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity' />
</form>
<form id='myform' method='POST' action='#'>
    <input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' name='quantity' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity' />
</form>
<script> 
$(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);
        }
    });
});
</script>

Answer 1

您可以通过以下方式获取字段：

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

这将从单击的元素上升一个元素，然后从可用的子元素中搜索您的字段。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form id='myform' method='POST' action='#'>
    <input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' name='quantity' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity' />
</form>
<form id='myform' method='POST' action='#'>
    <input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' name='quantity' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity' />
</form>

Answer 2

若要仅匹配当前表单中的元素，请替换以下各项的所有匹配项：

$('input[name='+fieldName+']')

跟：

$(this).closest('form').find('input[name='+fieldName+']')

最好将其保存为参考并使用它：

var $field = $(this).closest('form').find('input[name='+fieldName+']');
// Now you can use...
$field.val();