Javascriptで入力フィールドの値を増減する

Question

ショッピングカートにいくつかの機能を追加して、商品の数量を変更しました。したがって、数量入力フィールドの隣にプラスとマイナスのボタンがあります。複数の異なる製品が、私は仮定ワーク・ないだろう第二製品のボタンを追加した場合

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

は今、これはしかし作品：

<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： これはコードです彼らは同じ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、2番目の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の代わりにクラス名を使用することができます。現在の製品に関連する他の値を取得するデータ属性。

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