产品数量和价格联动

课后整理 2021-2-25

下面设计右侧产品数量和价格联动效果。这个功能非常简单,只要能够正确获取单价和数量,然后获取它们的积,最后把积赋值给相应的元素即可。

注意,为了防止元素刷新后依旧保持原来的值而引起的价格没有联动问题,需要在页面刚加载时,为元素绑定change事件之后立即触发change事件。

打开sizeAndprice.js文档,在下面输入如下代码:

/*数量和价格联动*/
$(function(){
    var $span = $(".pro_price strong");
	    var price = $span.text();	
	    $("#num_sort").change(function(){
	        var num = $(this).val();
	        	var amount = num * price;
		    $span.text( amount );
	    }).change();
})