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