JS原生写法怎样写出一个购物车

首先我们先理一下思路：
第一步：获取元素；
第二步：实现递增递减的状态，数量递减的时候并且不能为负数；
第三步：全选和每一项选择的一个状态；
第四步：计算出总数和总价格并写入页面：
第五步：实现删除效果，并改变数据。

 第一步先获取
写出来添加的点击事件
for (var i = 0; i < add.length; i++) {//
    (function (ind) {
        add[ind].onclick = function () {
            var num = data[ind].num;//找到数据里的数量
            num++;//点击同时数量 递增
            data[ind].num = num;//改变数据
            nums[ind].innerHTML = num;//写入页面
            data[ind].sum = data[ind].num * data[ind].now_price;//计算出数据里的总金额
            sums[ind].innerHTML = data[ind].sum;//写入页面
            getNum();

        }
    })(i)
}
for (var i = 0; i < jian.length; i++) {
    (function (ind) {
        jian[ind].onclick = function () {
            var num = data[ind].num;
            if (num > 1) {
                num--;
                data[ind].num = num;
                nums[ind].innerHTML = num;
                data[ind].sum = data[ind].num * data[ind].now_price;
                sums[ind].innerHTML = data[ind].sum;
            }
            getNum()
        }
    })(i)
}
all_check.onclick = function () {//全选的点击事件
    var bool = all_check.checked;//获取全选状态
    for (var i = 0; i < every_check.length; i++) {//循环每个单选框

        every_check[i].checked = bool;//单选框的选中状态与全选状态一致
        data[i].isChecked = bool;//改变数据
    }
    getNum()

}
for (var i = 0; i < every_check.length; i++) {//循环每个单选框
    (function (ind) {
        every_check[ind].onclick = function () {//当单选框发生改变时
            data[ind].isChecked = !data[ind].isChecked;//数据里的选中状态也发生改变，即相反的状态
            var val = data.every(function (item) {//利用迭代方法every，实现单选框全部选中的时，全选框才会选中
                return item.isChecked;
            })
            all_check.checked = val;
            getNum()
        }

    })(i)

}
getNum()

function getNum() {//计算总价
    var shop = 0,
        money = 0;
    for (var i in data) {//遍历数据
        if (data[i].isChecked) {//当数据里是选中状态时
            shop++;//总数量递增
            money += data[i].sum;//总价格是所以数据里总价格之和
        }
    }
    ready_num.innerHTML = shop;//写入页面
    ready_sum.innerHTML = money;


}
for (var i = 0; i < dels.length; i++) {//循环遍历删除按钮
    (function (ind) {
        dels[ind].onclick = function () {//当当前删除按钮点击时
            data.splice(ind, 1);//数据里删除当前项
            getContent()
        }
    })(i)
  }
}