Question

我已经在购物车中添加了一些功能来更改产品数量。因此，数量输入字段旁边有一个加号和减号按钮。这是代码：

 <button type="submit" id="qtyMinus" class="qtyMinus" title="<?php echo $this->__('Update') ?>"  data-qty="-1"><i class="fa fa-minus"></i></button>
    <input name="cart[<?php echo $_item->getId() ?>][qty]" value="<?php echo $this->getQty() ?>" size="4" id="qtyField" title="<?php echo $this->__('Qty') ?>" class="input-text qty" maxlength="12" type="text"/>


<button type="submit" id="qtyPlus" title="<?php echo $this->__('Update') ?>"  class="qtyPlus" data-qty="1"><i class="fa fa-plus"></i></button>
                        <button type="submit" title="<?php echo $this->__('Update') ?>" class="button btn-update-qty btn-alt btn-new"><span><span class="updateNew"><?php echo $this->__('Update') ?></span></span></button>

和jquery：

 $j("#qtyPlus").click(function(){
    var $n = $j("#qtyField");
    $n.val( Number($n.val())+1 ); 
});

 $j("#qtyMinus").click(function(){
    var $n = $j("#qtyField");
    $n.val( Number($n.val())-1 ); 
});

现在，这有效但是如果添加了多个不同的产品，第二个产品的按钮就不会起作用 - 我假设它们具有相同的ID。任何人都可以想到一个更好的方法来做这个或解决方法吗？

Answer 1

在文档中，您不能拥有更多相同的ID。将Ids更改为类并将每个项目放在父包装器中：

<div class="product"> 
<button type="submit" id="qtyMinus" class="qtyMinus" title="<?php echo $this->__('Update') ?>"  data-qty="-1"><i class="fa fa-minus"></i></button>
    <input name="cart[<?php echo $_item->getId() ?>][qty]" value="<?php echo $this->getQty() ?>" size="4" id="qtyField" title="<?php echo $this->__('Qty') ?>" class="input-text qty" maxlength="12" type="text"/>


<button type="submit" class="qtyPlus" title="<?php echo $this->__('Update') ?>"  class="qtyPlus" data-qty="1"><i class="fa fa-plus"></i></button>
                        <button type="submit" title="<?php echo $this->__('Update') ?>" class="button btn-update-qty btn-alt btn-new"><span><span class="updateNew"><?php echo $this->__('Update') ?></span></span></button>
</div>

现在你可以这样做：

 $j(".qtyPlus").click(function(){
    var n=$(this).closest('.product').find('.qtyField');
    n.val( Number(n.val())+1 ); 
});

Answer 2

这是因为你有一个ID为qtyPlus的元素。您的ID必须是唯一的，例如第一项的qtyPlus_1和第二项的qtyPlus_2，依此类推。

所以要增加第一项，它将是：

 $j("#qtyPlus_1").click(function(){
    var $n = $j("#qtyField");
    $n.val( Number($n.val())+1 ); 
});

Answer 3

试试这段代码。

     $j(".qtyPlus").click(function(){
    var $n = $(this).parent().find("#qtyField");
    $n.val( Number($n.val())+1 ); 
});

 $j(".qtyMinus").click(function(){
    var $n = $(this).parent().find("#qtyField");
    $n.val( Number($n.val())-1 ); 
});

但为了这个工作，每个产品应该在unqiue div内。例如：我们的html应该是这样的：

<div>     
<button type="submit" id="qtyMinus" class="qtyMinus" title="<?php echo $this->__('Update') ?>"  data-qty="-1"><i class="fa fa-minus"></i></button>
        <input name="cart[<?php echo $_item->getId() ?>][qty]" value="<?php echo $this->getQty() ?>" size="4" id="qtyField" title="<?php echo $this->__('Qty') ?>" class="input-text qty" maxlength="12" type="text"/>


    <button type="submit" id="qtyPlus" title="<?php echo $this->__('Update') ?>"  class="qtyPlus" data-qty="1"><i class="fa fa-plus"></i></button>
                            <button type="submit" title="<?php echo $this->__('Update') ?>" class="button btn-update-qty btn-alt btn-new"><span><span class="updateNew"><?php echo $this->__('Update') ?></span></span></button>
    </div>
    <div>
     <button type="submit" id="qtyMinus" class="qtyMinus" title="<?php echo $this->__('Update') ?>"  data-qty="-1"><i class="fa fa-minus"></i></button>
        <input name="cart[<?php echo $_item->getId() ?>][qty]" value="<?php echo $this->getQty() ?>" size="4" id="qtyField" title="<?php echo $this->__('Qty') ?>" class="input-text qty" maxlength="12" type="text"/>


    <button type="submit" id="qtyPlus" title="<?php echo $this->__('Update') ?>"  class="qtyPlus" data-qty="1"><i class="fa fa-plus"></i></button>
                            <button type="submit" title="<?php echo $this->__('Update') ?>" class="button btn-update-qty btn-alt btn-new"><span><span class="updateNew"><?php echo $this->__('Update') ?></span></span></button>
     </div>

。希望这可以帮助。这是小提琴： - https://jsfiddle.net/1bg1pnyf/4/

Answer 4

您可以使用类名而不是ID。而data-attribute则获取与当前产品相关的其他值。

$j(".qtyPlus").on('click', function(){
    var $n = $(this);
    $n.val( Number($n.data('qty'))+1 ); 
});

使用Javascript增加/减少输入字段的值

4 个答案: