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

要仅匹配当前表单中的元素，请替换所有出现的：

$('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();

Answer 2

你可以这样得到这个领域：

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

这将从点击的元素中提取一个元素，然后从可用的子元素中搜索您的字段。

＆＃13;

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);
        }
    });
});

＆＃13;

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

＆＃13;

Jquery定位.this元素不是全局

2 个答案: