我已经在购物车中添加了一些功能来更改产品数量。因此,数量输入字段旁边有一个加号和减号按钮。 这是代码:
<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。任何人都可以想到一个更好的方法来做这个或解决方法吗?
答案 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 );
});