每次出现新值时触发 .val() 然后更新数据属性

Question

我需要在每次出现新值时触发 .val() 然后更新按钮中的数据属性

我可以从以下位置获取号码：

<input type="text" id="quantity" name="quantity" class="form-control input-number" value="1" min="1" max="100">

使用：

$("input#quantity").val();

现在我希望每次 .val() HTML 值更改时都会触发它。

我有一个可以更新HTML值的加减箭头，完整标记如下：

<form class="cart-num" action="index.html" method="post">
    <input type="text" id="quantity" name="quantity" class="form-control input-number" value="1" min="1" max="100">
     <span class="input-group-btn">
         <button type="button" class="quantity-left-minus btn btn-number"  data-type="minus" data-field="">
             <span class="glyphicon glyphicon-minus">
              </span>
         </button>
            </span>
            <span class="input-group-btn">
           <button type="button" class="quantity-right-plus btn btn-number" data-type="plus" data-field="">
        <span class="glyphicon glyphicon-plus"></span>
     </button>
</span>

每次触发上述内容时，我都需要更新以下代码中的数据量：

<a data-quantity="3" data-product_id="<?php echo $product->get_id() ?>" class="button product_type_simple add_to_cart_button ajax_add_to_cart add_to_cart_variable">Add to cart</a>

Answer 1

我重新创建了加/减功能，因此您可能会忽略该部分，但这应该可以按预期工作（并且出于简单原因，我也不检查负数）：

$(function(){
	$('span.glyphicon').on('click', function(){
    	if($(this).hasClass('glyphicon-minus')){
        	$('input#quantity').val(parseInt($('input#quantity').val()) - 1);
        } else {
        	$('input#quantity').val(parseInt($('input#quantity').val()) + 1);
        }
        $('a.add_to_cart_variable').attr('data-quantity', $('input#quantity').val());
        logDataQuantityAttribute();
    });

	$('input#quantity').on('keyup', function(){
		$('a.add_to_cart_variable').attr('data-quantity', this.value);
        logDataQuantityAttribute();
	});
});

function logDataQuantityAttribute(){
	console.log('data-quantity Attribute: ' + $('a.add_to_cart_variable').attr('data-quantity'));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="quantity" name="quantity" class="form-control input-number" value="1" min="1" max="100">
     <span class="input-group-btn">
         <button type="button" class="quantity-left-minus btn btn-number"  data-type="minus" data-field="">
             <span class="glyphicon glyphicon-minus">MINUS</span>
         </button>
            </span>
            <span class="input-group-btn">
           <button type="button" class="quantity-right-plus btn btn-number" data-type="plus" data-field="">
        <span class="glyphicon glyphicon-plus">PLUS</span>
     </button>
</span>

<a data-quantity="1" data-product_id="123456789" class="button product_type_simple add_to_cart_button ajax_add_to_cart add_to_cart_variable">Add to cart</a>

Answer 2

要检测输入值的变化，您可以使用

$("#quantity").on("change paste keyup", function() {
      alert($(this).val()); 
 });

Answer 3

在这里，我完成了您的要求。每当您想更改文本框的值时，都需要更新属性。当您单击“-”和“+”按钮时，您还想更改值和属性。此代码适用于您的所有场景。

$(function(){
$("#update_tag").attr("data-update-val",$("#quantity").val());
$("#quantity").on("change",function(){
$("#update_tag").attr("data-update-val",$("#quantity").val());
});

$(".quantity-left-minus").on("click",function(){
if($("#quantity").val()<2)
return false;
 $("#quantity").val($("#quantity").val()-1);
 $("#update_tag").attr("data-update-val",$("#quantity").val());
});

$(".quantity-right-plus").on("click",function(){
 $("#quantity").val(+$("#quantity").val()+1);
 $("#update_tag").attr("data-update-val",$("#quantity").val());
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="quantity" name="quantity" class="form-control input-number" value="1" min="1" max="100">
     <span class="input-group-btn">
         <button type="button" class="quantity-left-minus btn btn-number"  data-type="minus" data-field="">
             <span class="glyphicon glyphicon-minus">-
              </span>
         </button>
            </span>
            <span class="input-group-btn">
           <button type="button" class="quantity-right-plus btn btn-number" data-type="plus" data-field="">
           
        <span class="glyphicon glyphicon-plus">+</span>
     </button>
     <a href="#" data-update-val="1" id="update_tag">add</a>
</span>

Answer 4

$(function(){
  $('form.cart-num button').on('click',function(){
    var $this = $(this),
        $quantity = $this.closest('form').find('input[name=quantity]'),
        $addToCart = $('a.ajax_add_to_cart');
        newQuantity = parseInt( $quantity.val() ) + ( $this.hasClass('quantity-left-minus') ? -1 : 1 );
    if( newQuantity < 1 ){
      newQuantity = 1;
    }
    $quantity.val( newQuantity );
    $addToCart.attr('data-quantity', newQuantity )
  });
});

Codepen：https://codepen.io/jamespoel/pen/zzjrqE