單擊按鈕時重複的輸入值

Question

我有兩個類似的輸入「數量」和按鈕「 - 」，「+」的形式。

我需要將輸入的值複製到第二個表單並返回。

例如：當我以第一種形式點擊「+」時，它會增加。

我需要在第二種形式是相同的價值。

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

我認爲我可以爲輸入設置相同的名字，這樣他們的工作方式相同。

感謝

這是我在jsfiddle

Answer 1

例如在輸入框中輸入觸發變化之前添加$('input.qty').not(quantity).val(quantity.val());。 ，你也有平變化監聽器添加$('input.qty').not(this).val($(this).val());的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>