购物车的快速实现

接上篇商品列表
css部分

<style>
   img{width: 130px;height: 130px;padding-left: 20px;}
   .checkall{display: inline;}
   .btn{font-size: 20px;width: 130px;height: 40px;margin: 10px auto;display: block;}
   .tonum{margin-left: 270px;font-size: 20px;display: inline-block;}
   .toprice{margin-right:370px;font-size:20px;display: inline-block;}
  </style>

html部分

<body>
    <h2>这里是购物车，<a href="test-商品列表.html">继续购物</a></h2>
    <table border=1 width=800 align="center">
        <thead>
            <tr>
                <th width=60><input type="checkbox" class="checkall" >全选</th>
                <th>图片</th>
                <th width=200>名字</th>
                <th>单价</th>
                <th width=100>数量</th>
                <th>总价</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <input type="button" value="清空购物车" class="btn"> 
    <div class="tonum">总数量：</div>
    <div class="toprice">去结算：</div>
</body>

javaScript部分

<script>
    class Car{
        constructor(){
            this.tBody = document.querySelector('tbody');
        }

        getData(){
            if(localStorage.getItem("goodsMsg")){
                this.gm = JSON.parse(localStorage.getItem("goodsMsg"))
            }else{
                this.gm = [];
            }
            this.display();
        }

        display(){
            var str = "";
            for(var i=0;i<this.gm.length;i++){
                str += `<tr index="${this.gm[i].goodsId}">
                        <td><img src="${this.gm[i].msg.img}"></td>
                        <td>${this.gm[i].msg.name}</td>
                        <td>${this.gm[i].msg.price}</td>
                        <td><input type="number" min="1" value="${this.gm[i].num}" class="number"></td>
                        <td>${ this.gm[i].msg.price * this.gm[i].num }</td>
                        <td class="delete">删除</td>
                        </tr>`
            }
            this.tBody.innerHTML = str;   
        }

        addEvent(){
            var that = this;
            // 利用事件委托绑定删除事件
            this.tBody.onclick = function(eve){
                var e = eve || window.event;
                var tar = e.target || e.srcElement;
                if(tar.className === "delete"){
                    that.id = tar.parentNode.getAttribute("index");
                    tar.parentNode.remove();
                    // 删除本地存储中的数据
                    that.changeData(function(i){
                        that.gm.splice(i,1);
                    });
                }
            }


            this.tBody.oninput = function(eve){
                var e = eve || window.event;
                var tar = e.target || e.srcElement;
                if(tar.className === "number"){
                    //获取要修改数量的商品的id
                    that.id = tar.parentNode.parentNode.getAttribute("index")
                    // 执行修改本地存储中数据的功能
                    that.changeData(function(i){
                        that.gm[i].num = tar.value
                    })

                    //实时修改价格
                    tar.parentNode.nextElementSibling.innerHTML = tar.value * tar.parentNode.previousElementSibling.innerHTML
                }
            }
        }

        changeData(cb){
            // 根据点击的商品的id查找本地存储的数据中符合的商品数据
            for(var i=0;i<this.gm.length;i++){
                if(this.gm[i].goodsId === this.id){
                    cb(i);
                    break;
                }
            }     
            
             // 剔除掉之后，得再存回去，否则仅仅是在内存中修改，没有修改本地存储
             localStorage.setItem("goodsMsg",JSON.stringify(this.gm)); 
        }
        
    }

    var c = new Car();
    c.getData();
    c.addEvent();
</script>

上述代码只实现了原生js简单购物车的功能，若需要更齐全的，后期会补充

LL-Echo

发布了19 篇原创文章 · 获赞 63 · 访问量 7394

私信关注

购物车的快速实现

猜你喜欢