js购物车的实现方法

第一步有数据

var date = [{
        img: '1.png',
        text: '赢（尊享版） 杰克 韦尔奇 著 管理巨匠经典作品 中信出版社图书 正版书籍',
        price: 36,
        num: 1,
        sum: 36,
        isChecked: true
    },
    {
        img: '2.png',
        text: '小牛（XIAONIU） 小牛电动车US新国标版 都市版智能锂电电动踏板车 电瓶车 电动代步 白色 都市安全版',
        price: 3748,
        num: 1,
        sum: 3748,
        isChecked: false
    },
    {
        img: '3.png',
        text: '尾巴先生 宠物猫咪饭食盆不锈钢斜面原木托高泰迪柯基法斗狗狗碗 M-一般',
        price: 98,
        num: 1,
        sum: 98,
        isChecked: false
    },
    {
        img: '4.png',
        text: '小佩PETKIT宠物智能称重猫碗狗盆狗碗猫碗狗狗碗食盆猫咪碗食',
        price: 99,
        num: 1,
        sum: 99,
        isChecked: false
    }
]

第二步渲染数据

var main = document.querySelector('.main')

function gethtml() {//渲染数据
    var aa = '';
    for (var i in date) {
        aa += `<ol>
        <li><input type="checkbox" name="" id=""${date[i].isChecked?'checked':''}>
            <img src="./imgs/${date[i].img}" alt="">
        </li>
        <li>${date[i].text}</li>
        <li>${date[i].price}</li>
        <li>
        <button id="jian">-</button>
        <input type="text" name="" id="" value="${date[i].num}">
        <button id="jia">+</button>
        </li>
        <li id="sum">${date[i].sum}</li>
        <li id='shanchu'>删除</li>
    </ol>
        `
    }
    main.innerHTML = aa;
    getevent(date)
}
gethtml();

第三步封装

function getevent(date) {
    var jia = document.querySelectorAll('#jia')
    var jian = document.querySelectorAll('#jian')
    var text = document.querySelectorAll('ol li input[type=text]')
    var sum = document.querySelectorAll('#sum')
    var all = document.querySelector('#all')
    var every_check = document.querySelectorAll('ol li input[type=checkbox]')
    var zong_jia=document.querySelector('#zong_jia')
    var zong_shu=document.querySelector('#zong_shu')
    var shanchu=document.querySelectorAll('#shanchu')
    var zong_num=0,zong_sum=0;

第四步点击加

//点击加
    for (var i = 0; i < jia.length; i++) {//加号框循环它的每一项
        jia[i].ind = i;//定位置
        jia[i].onclick = function () {//点击加事件
            date[this.ind].num++;//让数据中的这个数加加
            text[this.ind].value = date[this.ind].num//让文本框的value值等于加的数
            sum[this.ind].innerHTML = date[this.ind].num * date[this.ind].price//求总和让这个数乘以价钱
            getjiesuan()//调用函数
        }
    }

第四步点击减

for (var i = 0; i < jian.length; i++) {//减号框循环它的每一项
        jian[i].ind = i;//定位置
        jian[i].onclick = function () {//点击加事件
            if (date[this.ind].num > 1) {//判断这个数如果这个数大于1的话就可以减减
                date[this.ind].num--;
                text[this.ind].value = date[this.ind].num//让文本框的value值等于加的数
                sum[this.ind].innerHTML = date[this.ind].num * date[this.ind].price//求总和让这个数乘以价钱
                getjiesuan()//调用函数
            }
        }
    }

第五步全选

all.onclick = function () {//全选点击事件
        var boll = all.checked;//声明一个名字等于全选的选中状态
        for (var i = 0; i < every_check.length; i++) {//循环ol里选框的每一项
            every_check[i].checked = boll;//让他里面的每一项的选中状态与全选状态同步
            date[i].isChecked = boll;//跟数据里的也同步
        }
        getjiesuan()//调用函数
    }

第五步单选

for (var i = 0; i < every_check.length; i++) {////循环ol里选框的每一项
        every_check[i].ind = i;//定位置
        every_check[i].onclick = function () {//点击事件
            date[this.ind].isChecked = !date[this.ind].isChecked//取反
            var str = date.every(function (item) {//用every方法看他们的每一项是选中状态
                return item.isChecked
            })
            all.checked = str;//全选的选中状态跟它同步
            getjiesuan()//调用函数
        }
    }

第六步结算

    function getjiesuan(){//封装结算
        zong_num=0,zong_sum=0;//上面已经声明的
        for(var i in date){//循环数据的每一项
           if(date[i].isChecked){//判断他们是否是选中状态
            zong_num++;//数量加加
            zong_sum+= text[i].value  * date[i].price//总加加等于
           } 
        }
        zong_shu.innerHTML= zong_num//总数量写入页面
        zong_jia.innerHTML= zong_sum//总价钱写入页面
    }
    getjiesuan();

第七步点击删除

for(var i=0;i<shanchu.length;i++){//循环删除的每一项
        shanchu[i].ind=i//定位置
        shanchu[i].onclick=function(){//点击事件
            date.splice(this.ind,1);//删除数据的这一项，删除一个
            gethtml();//调用渲染
        }
       

    }

js购物车的实现方法

推荐阅读更多精彩内容