每次出现新值时使.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