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

我认为我可以为INPUT设置相同的名称，以便它们以相同的方式工作。

由于

这是我在jsfiddle

中的例子

Answer 1

在输入框中触发更改之前添加$('input.qty').not(quantity).val(quantity.val());。并且您还在$('input.qty').not(this).val($(this).val());

的onchange侦听器中添加了input.qty

＆＃13;

$(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));
			}
		}
    $('input.qty').not(quantity).val(quantity.val());
		quantity.trigger('change');
	});
  
	$('input.qty').on('change', function() {
      $('input.qty').not(this).val($(this).val());
      });
	$('input.qty').on('keyup', function() {
      $('input.qty').not(this).val($(this).val());
      });

});

＆＃13;

<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="-">
	<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>

＆＃13;

单击按钮时重复输入的值

1 个答案: