第一步有數(shù)據(jù)

var date = [{
        img: '1.png',
        text: '贏（尊享版） 杰克 韋爾奇 著 管理巨匠經(jīng)典作品 中信出版社圖書 正版書籍',
        price: 36,
        num: 1,
        sum: 36,
        isChecked: true
    },
    {
        img: '2.png',
        text: '小牛（XIAONIU） 小牛電動車US新國標(biāo)版 都市版智能鋰電電動踏板車 電瓶車 電動代步 白色 都市安全版',
        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
    }
]

第二步渲染數(shù)據(jù)

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

function gethtml() {//渲染數(shù)據(jù)
    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++) {//加號框循環(huán)它的每一項
        jia[i].ind = i;//定位置
        jia[i].onclick = function () {//點擊加事件
            date[this.ind].num++;//讓數(shù)據(jù)中的這個數(shù)加加
            text[this.ind].value = date[this.ind].num//讓文本框的value值等于加的數(shù)
            sum[this.ind].innerHTML = date[this.ind].num * date[this.ind].price//求總和讓這個數(shù)乘以價錢
            getjiesuan()//調(diào)用函數(shù)
        }
    }

第四步點擊減

for (var i = 0; i < jian.length; i++) {//減號框循環(huán)它的每一項
        jian[i].ind = i;//定位置
        jian[i].onclick = function () {//點擊加事件
            if (date[this.ind].num > 1) {//判斷這個數(shù)如果這個數(shù)大于1的話就可以減減
                date[this.ind].num--;
                text[this.ind].value = date[this.ind].num//讓文本框的value值等于加的數(shù)
                sum[this.ind].innerHTML = date[this.ind].num * date[this.ind].price//求總和讓這個數(shù)乘以價錢
                getjiesuan()//調(diào)用函數(shù)
            }
        }
    }

第五步全選

all.onclick = function () {//全選點擊事件
        var boll = all.checked;//聲明一個名字等于全選的選中狀態(tài)
        for (var i = 0; i < every_check.length; i++) {//循環(huán)ol里選框的每一項
            every_check[i].checked = boll;//讓他里面的每一項的選中狀態(tài)與全選狀態(tài)同步
            date[i].isChecked = boll;//跟數(shù)據(jù)里的也同步
        }
        getjiesuan()//調(diào)用函數(shù)
    }

第五步單選

for (var i = 0; i < every_check.length; i++) {////循環(huán)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方法看他們的每一項是選中狀態(tài)
                return item.isChecked
            })
            all.checked = str;//全選的選中狀態(tài)跟它同步
            getjiesuan()//調(diào)用函數(shù)
        }
    }

第六步結(jié)算

    function getjiesuan(){//封裝結(jié)算
        zong_num=0,zong_sum=0;//上面已經(jīng)聲明的
        for(var i in date){//循環(huán)數(shù)據(jù)的每一項
           if(date[i].isChecked){//判斷他們是否是選中狀態(tài)
            zong_num++;//數(shù)量加加
            zong_sum+= text[i].value  * date[i].price//總加加等于
           } 
        }
        zong_shu.innerHTML= zong_num//總數(shù)量寫入頁面
        zong_jia.innerHTML= zong_sum//總價錢寫入頁面
    }
    getjiesuan();

第七步點擊刪除

for(var i=0;i<shanchu.length;i++){//循環(huán)刪除的每一項
        shanchu[i].ind=i//定位置
        shanchu[i].onclick=function(){//點擊事件
            date.splice(this.ind,1);//刪除數(shù)據(jù)的這一項浙巫，刪除一個
            gethtml();//調(diào)用渲染
        }
       

    }