【案例一】移动端购物车基本功能实现,具体操作类似淘宝购车。
还是直接上图:
这个效果图很酷炫~ 有个坑纪念下,本来想用jquery-weui做的,然后各种倒腾,还是用css+div,妈耶!
关键核心的jquery语句控制:
//绑定全选的按钮,让所有购物车都选中,然后计算总数 $("#checkboxSum").on('click',function(){ if($(this).prop('checked')){ //让每个checkbox都被选中,attr不管用,使用prop $("[name='checkbox1']").prop("checked",'true');//全选 //遍历数组,进行选中和数量的合计和汇总 addSum(); }else{ $("[name='checkbox1']").removeAttr("checked");//取消全选 //遍历数组,进行选中和数量的合计和汇总 addSum(); } }) //循环绑定事件,购物车增加,减少和是否选中该商品 for (var i = 1; i < 3; i++) { $(".add" + i).bind("click", {index: i}, clickHandlerAdd); $(".redu" + i).bind("click", {index: i}, clickHandlerRedu); $("#s"+i).bind("change",{index:i},clickHandlerSum); } //选中购物车计算价格总数 function clickHandlerSum(event){ var i = event.data.index; addSum(); //计算选中购物车总价合计 findChecked(); //检测购物车是否全选和所选个数 } //增加商品的数量处理函数 function clickHandlerAdd(event) { var i = event.data.index; var a = parseInt($(".count" + i).text()); a++; $(".count" + i).text(a); if (a > 1) { $(".redu" + i).text("-"); } var b= parseInt($(".price" + i).text()); var sum = a*b; $(".sum"+i).text(sum); //遍历数组,进行选中和数量的合计和汇总 addSum(); } //减少商品的数量处理函数 function clickHandlerRedu(event) { var i = event.data.index; var a = parseInt($(".count" + i).text()); if( a == 1 ){ return; } if (a == 2) { $(this).text("").attr("readonly", true); a--; $(".count" + i).text(a); } else { a--; $(".count" + i).text(a); } var b= parseInt($(".price" + i).text()); var sum = a*b; $(".sum"+i).text(sum); //遍历数组,进行选中和数量的合计和汇总 addSum(); } //计算选中购物车总价合计 function addSum(){ var buySum=0; for(var j= 1; j<3;j++){ if($("#s"+j).prop('checked')){ //console.log(j); var s =parseInt($(".sum"+j).text()); buySum = s+buySum; } } //计算选中购物车的数量和总价汇总 $("#goBuySum").text(buySum); } //检测购物车是否全选和所选个数 function findChecked(){ var checkedSum = 0; //记货物被选中的数量 for(var k=1;k<3;k++){ if($("#s"+k).prop("checked")) checkedSum++; } //证明全选 if(checkedSum ==2){ $("#checkboxSum").prop('checked',true); }else{ //没有全选 $("#checkboxSum").prop('checked',false); } //设置购物的数量 $("#buyCount").text(checkedSum); }