更改总和时，变化量

Question

我有这样的HTML

<td class="cart_price"> 
    <p class="price_jq">11</p> 
</td> 
<td class="cart_quantity"> 
    <input type='button' value='-' class='qtyminus' field='quantity' /> 
    <input type='text' name='quantity' value='1' class='qty' /> 
    <input type='button' value='+' class='qtyplus' field='quantity' /> 
</td> 
<td class="cart_total"> 
    <p class="cart_total_price"></p> 
</td> 

而这样的jQuery脚本

$(document).ready(function(){ 
     $('.qtyplus').click(function(e){ 
      e.preventDefault(); 
      fieldName = $(this).attr('field'); 
      var currentVal = parseInt($('input[name='+fieldName+']').val()); 
      if (!isNaN(currentVal)) { 
       $('input[name='+fieldName+']').val(currentVal + 1); 
      } else { 
       $('input[name='+fieldName+']').val(0); 
      } 
     }); 
     $(".qtyminus").click(function(e) { 
      e.preventDefault(); 
      fieldName = $(this).attr('field'); 
      var currentVal = parseInt($('input[name='+fieldName+']').val()); 
      if (!isNaN(currentVal) && currentVal > 0) { 
       $('input[name='+fieldName+']').val(currentVal - 1); 
      } else { 
       $('input[name='+fieldName+']').val(0); 
      } 
     }); 

     var sum = 0; 
     var total = 0; 
     $('.price_jq').each(function() { 
      var price = $(this); 
      var count = price.closest('tr').find('.qty'); 
      sum = (price.html() * count.val()); 
      total = total + sum; 
      price.closest('tr').find('.cart_total_price').append(sum + "₴"); 
     }); 
     $('#total').append("<h3>£" + total + "</h3>"); 
    }); 

我想我必须使用jQuery的变化，但我尝试和结果，我什么都没有。也许我错过了什么

我需要当我更新td cart_quantity号码，更新我的总价格。

Answer 1

你应该绑定change事件上quantity文本

$(function() { 
    $('.qtyplus').click(function(e){ 
     e.preventDefault(); 
     fieldName = $(this).attr('field'); 

     //Fetch qty in the current elements context and since you have used class selector use it. 
     var qty = $(this).closest('tr').find('.qty'); 
     //var qty = $(this).closest('tr').find('input[name='+fieldName+']'); 

     var currentVal = parseInt(qty.val()); 
     if (!isNaN(currentVal)) { 
      qty.val(currentVal + 1); 
     } else { 
      qty.val(0); 
     } 

     //Trigger change event 
     qty.trigger('change'); 
    }); 

    $(".qtyminus").click(function(e) { 
     e.preventDefault(); 
     fieldName = $(this).attr('field'); 

     //Fetch qty in the current elements context and since you have used class selector use it. 
     var qty = $(this).closest('tr').find('.qty'); 
     //var qty = $(this).closest('tr').find('input[name='+fieldName+']'); 

     var currentVal = parseInt(qty.val()); 
     if (!isNaN(currentVal) && currentVal > 0) { 
      qty.val(currentVal - 1); 
     } else { 
      qty.val(0); 
     } 

     //Trigger change event 
     qty.trigger('change'); 
    });  

    //Bind the change event 
    $(".qty").change(function() { 
     var sum = 0; 
     var total = 0; 
     $('.price_jq').each(function() { 
      var price = $(this); 
      var count = price.closest('tr').find('.qty'); 
      sum = (price.html() * count.val()); 
      total = total + sum; 
      price.closest('tr').find('.cart_total_price').html(sum + "₴"); //Also use html() instead of append() 
     }); 
     $('#total').html("<h3>£" + total + "</h3>"); //Also use html() instead of append() 

    }).change(); //trigger change event on page load 
}); 

DEMO

Answer 2

你需要有一个变化的事件处理程序像

$(document).ready(function() { 
 
    $('.qtyplus').click(function(e) { 
 
    e.preventDefault(); 
 
    $(this).siblings(':text').val(function(i, val) { 
 
     return +val + 1 || 0; 
 
    }).change(); 
 
    }); 
 
    $(".qtyminus").click(function(e) { 
 
    e.preventDefault(); 
 
    $(this).siblings(':text').val(function(i, val) { 
 
     return +val - 1 || 0; 
 
    }).change(); 
 
    }); 
 

 
    var sum = 0; 
 
    $('.qty').change(function() { 
 
    var $tr = $(this).closest('tr'), 
 
     $total = $tr.find('.cart_total_price'), 
 
     total = +$tr.find('.price_jq').text() * +this.value || 0; 
 
    sum = sum - (parseInt($total.text()) || 0) + total; 
 
    $total.text(total + '₴'); 
 
    $('#total').html("<h3>£" + sum + "</h3>"); 
 
    }).change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td class="cart_price"> 
 
     <p class="price_jq">11</p> 
 
    </td> 
 
    <td class="cart_quantity"> 
 
     <input type='button' value='-' class='qtyminus' field='quantity' /> 
 
     <input type='text' name='quantity' value='1' class='qty' /> 
 
     <input type='button' value='+' class='qtyplus' field='quantity' /> 
 
    </td> 
 
    <td class="cart_total"> 
 
     <p class="cart_total_price"></p> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="cart_price"> 
 
     <p class="price_jq">11</p> 
 
    </td> 
 
    <td class="cart_quantity"> 
 
     <input type='button' value='-' class='qtyminus' field='quantity' /> 
 
     <input type='text' name='quantity' value='1' class='qty' /> 
 
     <input type='button' value='+' class='qtyplus' field='quantity' /> 
 
    </td> 
 
    <td class="cart_total"> 
 
     <p class="cart_total_price"></p> 
 
    </td> 
 
    </tr> 
 
</table> 
 
<div id="total"></div>