Question

我有这样的html结构

<td class="cart_quantity">
   <input type='button' value='-' class='qtyminus' field='quantity'/>
   <input type='text' name='quantity' value='5' class='qty'/>
   <input type='button' value='+' class='qtyplus' field='quantity'/>
</td>

我需要在表格的每一行中添加此部分。我为此写了jquery

$('.qtyplus').click(function (e) {
            e.preventDefault();
            fieldName = $(this).attr('field');
            var currentVal = parseInt($('input[name=' + fieldName + ']').val());
            if (!isNaN(currentVal)) {
                $('input[name=' + fieldName + ']').val(currentVal + 1);
            } else {
                $('input[name=' + fieldName + ']').val(0);
            }
        });
        $(".qtyminus").click(function (e) {
            e.preventDefault();
            fieldName = $(this).attr('field');
            var currentVal = parseInt($('input[name=' + fieldName + ']').val());
            if (!isNaN(currentVal) && currentVal > 0) {
                $('input[name=' + fieldName + ']').val(currentVal - 1);
            } else {
                $('input[name=' + fieldName + ']').val(0);
            }
        });

但问题是，当我添加更多行并点击加号或减号时，所有这些都开始改变。我怎么能修好它？我可以使用twig来添加，例如为每个表行定义循环的索引。像这样的东西

 <input type='button' value='-' class='qtyminus{{loop.index}}' field='quantity'/>

请帮助解决这个问题

Answer 1

使用$ .prev和$ .next根据与正在按下的按钮的关系来定位输入。

$('.qtyplus').click(function (e) {
    e.preventDefault();
    var $this = $(this);
    var $target = $this.prev('input[name=' + $this.attr('field') + ']');
    var currentVal = parseInt($target.val());
    if (!isNaN(currentVal)) {
        $target.val(currentVal+1);
    } else {
        $target.val(0);
    }
});
$(".qtyminus").click(function (e) {
    e.preventDefault();
    var $this = $(this);
    var $target = $this.next('input[name=' + $this.attr('field') + ']');
    var currentVal = parseInt($target.val());
    if (!isNaN(currentVal)) {
        $target.val((currentVal == 0) ? 0 :currentVal-1);
    } else {
        $target.val(0);
    }
});

另一个选项是var $target = $this.parent().find('input[name=' + $this.attr('field') + ']')

此处示例：

http://jsfiddle.net/SeanWessell/2youraqu/

此示例将jquery减少为一个函数，该函数将使用选择器字段=数量来定位加号和减号按钮，然后确定该项具有类qtyplus以确定它是否正在添加或减去。

$('input[field="quantity"]').click(function (e) {
    e.preventDefault();
    var $this = $(this);
    var $target = $this.parent().find('.qty');
    var currentVal = parseInt($target.val());
    //check to see if we're adding one or subtracting one
    var adjustment = ($this.hasClass('qtyplus')) ? 1 : -1;
    if (!isNaN(currentVal)) {
        //check to see if adjustment would go negative if so set to 0.
        $target.val((currentVal + adjustment < 0) ? 0 : currentVal + adjustment);
    } else {
        $target.val(0);
    }
});

http://jsfiddle.net/SeanWessell/2youraqu/2/

Answer 2

一种解决方案是使用prev或next。

$('.qtyplus').click(function (e) {
    var $input  = $(this).prev('input');
    ...
});
$('.qtyminus').click(function (e) {
    var $input  = $(this).next('input');
    ...
});

http://jsfiddle.net/daveSalomon/7yotfe0c/

动态地为每个td添加按钮加号和减号

2 个答案: