标签：
功能：还未进入购物车时，底部有【共计：】，需要简单的计算进入购物车的货物一共价值多少钱
背景：商品价格被加入了每个商品的【加入购物车按钮】的属性里 ： <p class="addToCarBtn" data-productid="402885de4e059ccd014e05b1c202000e" data-producttitle="森美非浓缩还原橙汁 1L" data-productcurrentcount="100" data-productprice="48.00" data-producttype="402885de4d7f0d15014d7f515e8e018e" data-productgdprice="40.00" data-storeproductfreight="0.00" data-amount="1" onclick="addCar(this);">加入购物车</p>
初始实现思路：选中每个【加入购物车】按钮，遍历它们，点击它们时用this.attr(‘data-productprice‘)来获取他们的价格，然后加到一起（还没考虑到重复加入怎么避免），代码： var a=[]; a=$(‘.addToCarBtn‘); 遍历a ; a[i].click(function(){this.attr(‘data-productprice‘)})
初始结果： this总是不起作用，不清楚原因；
最终实现思路： 每个商品【加入购物车按钮】里都加入了onclick="addCar(this)；这个事件。这个事件的this是可以正确指向这个按钮的；addCar()如下：
function addCar(obj){ var productId = $(obj).attr("data-productId"); var productType=$(obj).attr("data-productType"); var productTitle = $(obj).attr("data-productTitle"); var productCurrentCount = $(obj).attr("data-productCurrentCount"); var productPrice = $(obj).attr("data-productPrice"); var productGdprice=$(obj).attr("data-productGdprice"); var storeProductFreight=$(obj).attr("data-storeProductFreight"); var amount=$(obj).attr("data-amount"); var proStr = productId + "|||" + productTitle + "|||" + productCurrentCount + "|||" + productPrice+ "|||" +productGdprice+ "|||" +storeProductFreight+ "|||" +amount; var proArray = new Array(); var pro = {}; var car = localStorage.getItem("car-" + communityId); productTypeArr.push(productType); sessionStorage.setItem(‘productTypeArray‘,productTypeArr); if(car == null || car.indexOf(productId) == -1){ carNumber=parseFloat(productPrice)+parseFloat(carNumber); $(‘#carNumber‘).html(‘共计：‘+carNumber+‘元‘); if(car == null || car == ""){ localStorage.setItem("car-" + communityId,proStr); }else{ localStorage.setItem("car-" + communityId,car + "###" + proStr); } alert("加入购物车成功！"); }else{ alert("该商品已在购物车中！"); } }
其中使用 if(car == null || car.indexOf(productId) == -1) 就解决了重复加入的问题
总结：1.给每个按钮绑定事件带this，比把每个按钮都选中，遍历绑时间好像要好用
2.if(car == null || car.indexOf(productId) == -1) 解决重复加入问题
3.parseFloat（）从字符串到数字
标签：
原文地址：http://www.cnblogs.com/xisitan/p/4726895.html
