美文网首页
JS原生写法怎样写出一个购物车

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

作者: 拾柒_aab0 | 来源:发表于2019-10-27 23:19 被阅读0次

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

     第一步先获取
    写出来添加的点击事件
    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)
      }
    }

    相关文章

      网友评论

          本文标题:JS原生写法怎样写出一个购物车

          本文链接:https://www.haomeiwen.com/subject/cxzmvctx.html