下面设计右侧产品数量和价格联动效果。这个功能非常简单,只要能够正确获取单价和数量,然后获取它们的积,最后把积赋值给相应的元素即可。
注意,为了防止元素刷新后依旧保持原来的值而引起的价格没有联动问题,需要在页面刚加载时,为元素绑定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();
})