淘宝购物车的交互效果

最近看了一个介绍说天猫的前台页面的布局与交互效果，看到购物车这块，自己也练练手，页面布局是借鉴过来的，只要是交互这块，如果有问题请指出。

<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);
    }
}

代码比较繁琐，自己的水平不是很高，会有考虑不周的地方，有问题请指出！