ボタンをクリックすると入力値が重複する

Question

"Quantity"とボタン " - "、 "+"の2つの類似したフォームがあります。

入力の値を2番目のフォームにコピーして戻す必要があります。

例：最初のフォームで「+」をクリックすると、増分されます。

2番目の形式で同じ値が必要です。

<div class="quantity"> 
    <input class="subtraction" name="sub" type="button" value="-"> 
    <input type="number" step="1" name="qty" value="1" class="input-text qty text panel-quantity" size="4" /> 
    <input class="addition" name="add" type="button" value="+"> 
</div> 
<div class="quantity"> 
    <input class="subtraction" name="sub" type="button" value="-"> 
    <input type="number" step="1" name="qty" value="1" class="input-text qty text panel-quantity" size="4"/> 
    <input class="addition" name="add" type="button" value="+"> 
</div> 

JS：

$(function(){ 
    $('.quantity').on('click', '.addition, .subtraction', function() { 
     var quantityPanel = $('.panel-quantity'); 
     var quantity = $(this).closest('.quantity').find('input.qty'); 
     var currentValue = parseInt(quantity.val()); 
     var maxValue = parseInt(quantity.attr('max')); 
     var minValue = parseInt(quantity.attr('min')); 

     if($(this).is('.addition')) { 
      if(maxValue && (currentValue >= maxValue)){ 
       quantity.val(maxValue); 
      } else { 
       quantity.val((currentValue + 1)); 
      } 
     } else { 
      if (minValue && (currentValue <= minValue)) { 
       quantity.val(minValue); 
      } else if(currentValue > 0) { 
       quantity.val((currentValue - 1)); 
      } 
     } 
     quantity.trigger('change'); 
    }); 
}); 

私は、彼らが同じように動作するように私は、INPUTに同じ名前を設定することができると思います。

おかげ

それは、入力ボックスに変更をトリガする前に$('input.qty').not(quantity).val(quantity.val());を追加jsfiddle

Answer 1

で私の例です。そしてまた、あなたは男だinput.qty

$(function(){ 
 
\t $('.quantity').on('click', '.addition, .subtraction', function() { 
 
\t \t var quantityPanel = $('.panel-quantity'); 
 
\t \t var quantity = $(this).closest('.quantity').find('input.qty'); 
 
\t \t var currentValue = parseInt(quantity.val()); 
 
\t \t var maxValue = parseInt(quantity.attr('max')); 
 
\t \t var minValue = parseInt(quantity.attr('min')); 
 

 
\t \t if($(this).is('.addition')) { 
 
\t \t \t if(maxValue && (currentValue >= maxValue)){ 
 
\t \t \t \t quantity.val(maxValue); 
 
\t \t \t } else { 
 
\t \t \t \t quantity.val((currentValue + 1)); 
 
\t \t \t } 
 
\t \t } else { 
 
\t \t \t if (minValue && (currentValue <= minValue)) { 
 
\t \t \t \t quantity.val(minValue); 
 
\t \t \t } else if(currentValue > 0) { 
 
\t \t \t \t quantity.val((currentValue - 1)); 
 
\t \t \t } 
 
\t \t } 
 
    $('input.qty').not(quantity).val(quantity.val()); 
 
\t \t quantity.trigger('change'); 
 
\t }); 
 
    
 
\t $('input.qty').on('change', function() { 
 
     $('input.qty').not(this).val($(this).val()); 
 
     }); 
 
\t $('input.qty').on('keyup', function() { 
 
     $('input.qty').not(this).val($(this).val()); 
 
     }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="quantity"> 
 
<input class="subtraction" name="sub" type="button" value="-"> 
 
\t <input type="number" step="1" name="qty" value="1" class="input-text qty text panel-quantity" size="4" /> 
 
\t <input class="addition" name="add" type="button" value="+"> 
 
</div> 
 
<div class="quantity"> 
 
\t \t <input class="subtraction" name="sub" type="button" value="-"> 
 
\t \t <input type="number" step="1" name="qty" value="1" class="input-text qty text panel-quantity" size="4"/> 
 
\t \t <input class="addition" name="add" type="button" value="+"> 
 
\t \t </div>