淘宝购物车的交互效果
最近看了一个介绍说天猫的前台页面的布局与交互效果，看到购物车这块，自己也练练手，页面布局是借鉴过来的，只要是交互这块，如果有问题请指出。
<div class="cartDiv"> <div class="cartTitle pull-right"> <span>已选商品 (不含运费)</span> <span class="cartTitlePrice">￥0.00</span> <button class="createOrderButton" style="background-color: rgb(170, 170, 170);" disabled="disabled">结 算</button> </div> <div class="cartProductList"> <table class="cartProductTable"> <thead> <tr> <th class="selectAndImage"> <img src="images/cartNotSelected.png" class="selectAllItem" selectit="false"> 全选 </th> <th>商品信息</th> <th>单价</th> <th>数量</th> <th width="120px">金额</th> <th class="operation">操作</th> </tr> </thead> <tbody> <tr class="cartProductItemTR" oiid="936" style="background-color: rgb(255, 255, 255);"> <td> <img src="images/cartNotSelected.png" class="cartProductItemIfSelected" oiid="936" selectit="false"> <a href="#nowhere" style="display:none"><img src="images/cartSelected.png"></a> <img src="images/3665.jpg" class="cartProductImg"> </td> <td> <div class="cartProductLinkOutDiv"> <a class="cartProductLink" href="#nowhere">美国iRobot扫地机器人吸尘器全自动家用智能扫地机650 天猫电器城</a> <div class="cartProductLinkInnerDiv"> <img title="支持信用卡支付" src="http://how2j.cn/tmall/img/site/creditcard.png"> <img title="消费者保障服务,承诺7天退货" src="http://how2j.cn/tmall/img/site/7day.png"> <img title="消费者保障服务,承诺如实描述" src="http://how2j.cn/tmall/img/site/promise.png"> </div> </div> </td> <td> <span class="cartProductItemOringalPrice">￥7580.0</span> <span class="cartProductItemPromotionPrice">￥5306.0</span> </td> <td> <div class="cartProductChangeNumberDiv"> <span pid="365" class="hidden orderItemStock ">75</span> <span pid="365" class="hidden orderItemPromotePrice ">5306.0</span> <a href="#nowhere" class="numberMinus" pid="365">-</a> <input value="1" autocomplete="off" class="orderItemNumberSetting" oiid="936" pid="365"> <a href="#nowhere" class="numberPlus" pid="365" stock="75">+</a> </div> </td> <td><span pid="365" oiid="936" class="cartProductItemSmallSumPrice">￥5,306.00</span></td> <td><a href="#nowhere" oiid="936" class="deleteOrderItem">删除</a></td> </tr> <tr class="cartProductItemTR" oiid="935" style="background-color: rgb(255, 255, 255);"> <td> <img src="images/cartNotSelected.png" class="cartProductItemIfSelected" oiid="935" selectit="false"> <a href="#nowhere" style="display:none"><img src="images/cartSelected.png"></a> <img src="images/8510.jpg" class="cartProductImg"> </td> <td> <div class="cartProductLinkOutDiv"> <a class="cartProductLink" href="#nowhere">阔腿裤三件套装女夏装2016新款大码雪纺时尚休闲气质棉麻九分裤潮</a> <div class="cartProductLinkInnerDiv"> <img title="支持信用卡支付" src="http://how2j.cn/tmall/img/site/creditcard.png"> <img title="消费者保障服务,承诺7天退货" src="http://how2j.cn/tmall/img/site/7day.png"> <img title="消费者保障服务,承诺如实描述" src="http://how2j.cn/tmall/img/site/promise.png"> </div> </div> </td> <td> <span class="cartProductItemOringalPrice">￥235.0</span> <span class="cartProductItemPromotionPrice">￥152.75</span> </td> <td> <div class="cartProductChangeNumberDiv"> <span pid="809" class="hidden orderItemStock ">17</span> <span pid="809" class="hidden orderItemPromotePrice ">152.75</span> <a href="#nowhere" class="numberMinus" pid="809">-</a> <input value="1" autocomplete="off" class="orderItemNumberSetting" oiid="935" pid="809"> <a href="#nowhere" class="numberPlus" pid="809" stock="17">+</a> </div> </td> <td><span pid="809" oiid="935" class="cartProductItemSmallSumPrice">￥152.75</span></td> <td><a href="#nowhere" oiid="935" class="deleteOrderItem">删除</a></td> </tr> </tbody> </table> </div> <div class="cartFoot"> <img src="images/cartNotSelected.png" class="selectAllItem" selectit="false"> <span>全选</span> <!--<a href="#">删除</a> --> <div class="pull-right"> <span>已选商品 <span class="cartSumNumber">0</span> 件</span> <span>合计 (不含运费): </span> <span class="cartSumPrice">￥0.00</span> <button class="createOrderButton" style="background-color: rgb(170, 170, 170);" disabled="disabled">结 算</button> </div> </div> </div>
购物车，我们要实现的效果有：
1、选中的商品和未选中的商品有背景颜色的标识；
2、数量增加或减少时，商品的金额会发生变化，商品的总金额会相应变化；
3、确定已选商品的个数；
4、点击全选，下面的商品会被全选；
5、可以自己输入商品的数量；（这块用户体验，感觉还需要商量，具体情况具体分析）
综合以上要求，交互代码如下：
/*购物车交互*/ $(function(){
//选中的商品标签添加一个类名，方便以后判断谁被选中 $('img.cartProductItemIfSelected').click(function(){ if($(this).attr('selectit')=='false'){ $(this).attr('src','images/cartSelected.png'); $(this).attr('selectit','select'); $(this).parent().parent().css('background','#fff8e1'); $(this).addClass('select'); /* $('.cartTitlePrice').text('￥'+)*/ }else{ $(this).attr('src','images/cartNotSelected.png'); $(this).attr('selectit','false'); $(this).parent().parent().css('background','#fff'); $(this).removeClass('select'); } //判断被选中的个数 var selen=$('img.select').length; if(selen>=1){ $('.createOrderButton').css('background','#c40000'); }else{ $('.createOrderButton').css('background','#aaaaaa'); } //计算选中商品的总金额，调用这个函数 total(); //已选商品件数设置 $('.cartSumNumber').text(selen); //全选，当都被选中的时候，全选按钮发生变化 var trlen=$('table tbody tr').length if(selen==trlen){ $('.selectAllItem').attr('selectit','select'); $('.selectAllItem').attr('src','images/cartSelected.png'); }else{ $('.selectAllItem').attr('selectit','false'); $('.selectAllItem').attr('src','images/cartNotSelected.png'); } }) //全选，点击全选，下面的商品都会被选上，同时商品个数、商品总价会发生变化 $('.selectAllItem').click(function(){ if($(this).attr('selectit')=='false'){ $(this).attr('selectit','select'); $(this).attr('src','images/cartSelected.png'); $('img.cartProductItemIfSelected').each(function(){ if($(this).attr('selectit')=='false'){ $(this).attr('src','images/cartSelected.png') $(this).attr('selectit','select'); $(this).addClass('select'); $(this).parent().parent().css('background','#fff8e1'); } }) total(); var selen=$('img.select').length; $('.cartSumNumber').text(selen); } }) //数量增加减少，自定义数量 $('input.orderItemNumberSetting').keyup(function(){ var inputNumb=$(this).val(); if(inputNumb==""){ inputNumb=1; } if(isNaN(inputNumb)&&parseInt(inputNumb)>=1){ inputNumb=parseInt(inputNumb); }else{ inputNumb=1 } //alert(inputNumb); $(this).val(inputNumb); }) $('.numberPlus').click(function(){ var inputNum1=$(this).siblings('input.orderItemNumberSetting').val(); inputNum1++; $(this).siblings('input.orderItemNumberSetting').val(inputNum1); var inputNumb=$(this).siblings('input.orderItemNumberSetting').val(); var singlepri=$(this).parent().parent().siblings().find('.cartProductItemPromotionPrice').text(); // alert(singlepri); singlepri=singlepri.substr(1); singlepri=singlepri.replace(/[^0-9.]/g, '');//非数字和.的替换，将金额换成浮点型number，这块可以根据需要进行变化，或者直接把金额用一个标签包进来，就不需要这么多的变化了。 singlepri=parseFloat(singlepri); var carpria=inputNumb*singlepri;//计算总价 $(this).parent().parent().siblings().find('.cartProductItemSmallSumPrice').text('￥'+carpria.toFixed(2)); total(); }) $('.numberMinus').click(function(){ var inputNum1=$(this).siblings('input.orderItemNumberSetting').val(); inputNum1--; if(inputNum1<1){ inputNum1=1; } $(this).siblings('input.orderItemNumberSetting').val(inputNum1); var inputNumb=$(this).siblings('input.orderItemNumberSetting').val(); //alert(carprib);3*5306 var singlepri=$(this).parent().parent().siblings().find('.cartProductItemPromotionPrice').text(); // alert(singlepri); singlepri=singlepri.substr(1); singlepri=singlepri.replace(/[^0-9.]/g, '');//非数字和.的替换 singlepri=parseFloat(singlepri); var carpria=inputNumb*singlepri;//计算总价 $(this).parent().parent().siblings().find('.cartProductItemSmallSumPrice').text('￥'+carpria.toFixed(2)); total(); }) }) //已选商品总价函数 function total(){ var selen=$('img.select').length; var price2=0; if(selen==0){ $('.cartTitlePrice').text("￥0.00"); $('.cartSumPrice').text("￥0.00"); } for(var i=0;i<selen;i++){ var price1=$('img.select').eq(i).parent().siblings().find('.cartProductItemSmallSumPrice').text(); price1=price1.substr(1); price1=price1.replace(/[^0-9.]/g, '');//非数字和.的替换 price1=parseFloat(price1); price2=price2+price1; /*price1+=price1;*/ console.log(price2); $('.cartTitlePrice').text("￥"+price2); $('.cartSumPrice').text("￥"+price2); } }
代码比较繁琐，自己的水平不是很高，会有考虑不周的地方，有问题请指出！
