mui开发APP教程之仿天猫购物车

购物车原始页面：

先说说功能：
1、点击编辑，出现删除按钮，编辑变为完成两字；
2、点击删除，将当前这行的商品删除；
3、勾选任何一个复选框，立即购买按钮由禁用变为可用，同时，当勾选取消后，立即购买按钮回复原样；
4、勾选任何一个复选框时，合计金额变为所勾选的商品的金额之和；

接下来展示页面效果：

点击编辑后：

点击删除后：

删除之后：

实现原理：

页面 html代码：

<header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">购物车</h1>
    <a class="mui-pull-right" id="showDel">编辑</a>
</header>
<div class="mui-content">
    <div class="shopCart" id="shopCart">
        <div class="shopCartItem">
            <input class="iptSelect" type="checkbox">
            <img title="10001" src="../administrator/goodsImg/ZSimg/zs0201.jpg" />
            <div class="goodsInfo" style="display: block;">
                <p class="shopTitle">商品4</p>
                <p class="shopPrice"> &yen;1235 </p>
            </div>
            <div class="goodsOpreation">
                <span class="goodsCount">商品数量:1</span>
                <span class="shopDel">删除</span>
            </div>
            </div>
            <div class="shopCartItem">
                <input class="iptSelect" type="checkbox">
                <img title="10001" src="../administrator/goodsImg/HSimg/hs0101.jpg" />
                <div class="goodsInfo" style="display: block;">
                    <p class="shopTitle">商品1</p>
                    <p class="shopPrice"> &yen;1235 </p>
                </div>
                <div class="goodsOpreation">
                    <span class="goodsCount">商品数量:1</span>
                    <span class="shopDel">删除</span>
                </div>
            </div>
            <div class="shopCartItem">
                <input class="iptSelect" type="checkbox">
                <img title="10001" src="../administrator/goodsImg/OSimg/os0101.jpg" />
                <div class="goodsInfo" style="display: block;">
                    <p class="shopTitle">商品2</p>
                    <p class="shopPrice"> &yen;1235 </p>
                </div>
                <div class="goodsOpreation">
                    <span class="goodsCount">商品数量:1</span>
                    <span class="shopDel">删除</span>
                </div>
            </div>
            <div class="shopCartItem">
                <input class="iptSelect" type="checkbox">
                <img title="10001" src="../administrator/goodsImg/ZSimg/zs0101.jpg" />
                <div class="goodsInfo" style="display: block;">
                    <p class="shopTitle">商品3</p>
                    <p class="shopPrice"> &yen;1235 </p>
                </div>
                <div class="goodsOpreation">
                    <span class="goodsCount">商品数量:1</span>
                    <span class="shopDel">删除</span>
                </div>
            </div>
        <div class="mui-bar mui-bar-tab">
        <p class="totalPrice">
            合计:<span id="totalPrice">&yen;0</span>
        </p>
        <p class="buyNow">
            <button id="buyNowBtn" class="buyNowBtn" disabled="disabled">立即购买</button>
        </p>
    </div>
</div>

js代码：

1、点击编辑，出现删除按钮，编辑变为完成两字：

document.getElementById('showDel').addEventListener('tap',function () {
if(this.innerHTML=='编辑'){
    this.innerHTML='完成';
}else{
    this.innerHTML='编辑';
}

var goodsInfo=document.getElementsByClassName('goodsInfo');
var goodsOpreation=document.getElementsByClassName('goodsOpreation');

if(goodsInfo.length>0){
    var goodsInfoStyles=goodsInfo[0].getAttribute("style");
    var goodsInfoStatus=goodsInfoStyles.split(':')[1];
}else{
    document.getElementById("shopCart").innerHTML='<p>您的购物车是空的哟</p>';
}

//切换删除按钮
if(goodsInfoStatus!='none'){
    for(var i=0;i<goodsInfo.length;i++){
        goodsInfo[i].setAttribute('style','display:none');
        goodsOpreation[i].setAttribute('style','display:block');
    }
}else{
    for(var j=0;j<goodsInfo.length;j++){
        goodsOpreation[j].setAttribute('style','display:none');
        goodsInfo[j].setAttribute('style','display:block'); 
    }
}   
});

2、点击删除，将当前这行的商品删除；

mui('.goodsOpreation').on('tap','.shopDel',function(){
    var btnArr=['确定','再看看'];
    //获取到当前删除节点
    var thisNode=this.parentNode.parentNode;
    mui.confirm(' ','确定删除该商品？',btnArr,function(e){
        if(e.index==0){
            thisNode.remove();
        }
    });
});

3、勾选任何一个复选框，立即购买按钮由禁用变为可用，同时，当勾选取消后，立即购买按钮恢复原样；

mui(document.body).on('change','.iptSelect',function(){
    //购物车中复选框
    var iptSelect=document.getElementsByClassName('iptSelect');
    //判断是否选择
    var checked=false;
    //获取到当前商品ID，以便购买时将商品信息发送到服务器
    var goodsIdArr=[];
    var goodId;
    //所勾选商品的价格
    var priceArr=[];
    var price=0;


    //添加之前先清空数组，防止之前添加的还在，
    //比如当你已经勾选了了四个，现在要放弃两个，那么那个就不应该再在这里面
    goodsIdArr.splice(0,goodsIdArr.length);
    priceArr.splice(0,priceArr.length);

    for (var j=0;j<iptSelect.length;j++) {
        if(iptSelect[j].checked){
        //如果勾选了获取所勾选商品的ID和价格
            goodId=parseInt(iptSelect[j].getAttribute('value'));    
            priceStr=iptSelect[j].parentNode.children[2].children[1].innerHTML;

            var reg=/[0-9]+/g;
            //将&yen;符号过滤，并且强制转换为数字类型
            price=parseInt(priceStr.match(reg));

            //如果不为空，且已经不存在于数组，才添加至数组
            if(goodId !=undefined && goodsIdArr.indexOf(goodId)==-1　){
                goodsIdArr.push(goodId);
                priceArr.push(price);
            }
        }
    }   

4、勾选任何一个复选框时，合计金额变为所勾选的商品的金额之和；

        //总计
        var totalPrice=0;
        for(var z=0;z<priceArr.length;z++){
            totalPrice=totalPrice+priceArr[z];  
        }
        document.getElementById("totalPrice").innerHTML='&yen;'+totalPrice;


        //获取当前有INPUT框勾选，如有则将buyNowBtn设为可用的
        for(var i=0;i<iptSelect.length;i++){
            if(iptSelect[i].checked){
                checked=true; 
                mui('#buyNowBtn')[0].disabled=false;
                //这个return，个人想这个想了好久，老是不出现想要的效果，
                //第一次，没有return，结果只有勾选最后一个才有效，
                //因为，无论你勾选了多少个，只要最后一个不勾选，
                //当循环到最后时，checked都会变为false,即立即购买都会变为禁用，
                //按道理来讲，只要查询到有勾选的，则将其设为可用，跳出循环。
                return;
            }else{
                checked=false;
                mui('#buyNowBtn')[0].disabled=true;
            }
        }
    });

css链接:这里写链接内容

第一次写这么长的博客，点个赞再走呗~