Дублируемое значение ввода при нажатии на кнопку

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()); в OnChange слушателем 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>