让.VAL（）每次触发那么新的值出现更新数据属性

Question

我需要.VAL（）每次都那么新的值出现更新按钮数据属性触发

我可以得到数：

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

使用：

$（ “＃输入量”）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(){ 
 
\t $('span.glyphicon').on('click', function(){ 
 
    \t if($(this).hasClass('glyphicon-minus')){ 
 
     \t $('input#quantity').val(parseInt($('input#quantity').val()) - 1); 
 
     } else { 
 
     \t $('input#quantity').val(parseInt($('input#quantity').val()) + 1); 
 
     } 
 
     $('a.add_to_cart_variable').attr('data-quantity', $('input#quantity').val()); 
 
     logDataQuantityAttribute(); 
 
    }); 
 

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

 
function logDataQuantityAttribute(){ 
 
\t 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

$("input#quantity").on("change",function(){ 
    var val = $("input#quantity").val(); 
    $(".product_type_simple").attr("data-quantity",val); 
}); 

试试这个

Answer 4

在这里，我完成你的要求。无论何时想要更改文本框的值，都需要更新该属性。当您点击“ - ”&“+”按钮时，您还想要更改该值和属性。此代码将适用于所有情况。

$(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 5

$(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