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

时间:2016-07-07 09:54:58

标签: javascript jquery html

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

 <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。任何人都可以想到一个更好的方法来做这个或解决方法吗?

4 个答案:

答案 0 :(得分:2)

在文档中,您不能拥有更多相同的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 ); 
});

答案 1 :(得分:0)

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

所以要增加第一项,它将是:

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

答案 2 :(得分:0)

试试这段代码。

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

答案 3 :(得分:0)

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

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