购物车 - 简书

在我们写购物车的时候一定要捋清思路，在写之前一定要把自己的HTML的结构搞清楚；
下面是我自己写的购物车：
我在HTML的代码为：

<div class="height">
    <div class="nav">
        <p><span>特卖商品 19:46</span>|<span>唯品医药</span></p>
    </div>
    <div class="tittle">
        <p><span>配送至北京市</span>|<span>请在倒计时结束前提交订单，下班后你另有30分钟的支付时间</span></p>
    </div>
    <div class="shangpin">
        <ul>
            <li>精选特卖</li>
            <li>单价</li>
            <li>数量</li>
            <li>小计</li>
            <li>操作</li>
        </ul>
        <div class="img">
            <!-- <input type="checkbox" name="" id="">
            <img src="../img/1.png" alt="">
            <p><span>自营|</span>【棉100%】红豆集团旗下海魂衫柔软亲肤全面男士短袖polo</p>
            <p>尺码：XL</p>
            <b>￥128</b>
            <button>-</button>
            <input type="text">
            <button>+</button>
            <p>￥128</p>
            <p>删除</p> -->
        </div>
    </div>
    <div class="tll">
        <input type="checkbox" name="" id="" class="quan">全选
        <p>共<span class="sp"></span>商品 商品金额 <span class="all">￥</span></p>
        <p>总金额（未含运费）<span class="all_2">￥</span></p>
        <div class="foot">
            <p>总金额<span class="all_3"></span></p>
            <button>立即结算</button>
        </div>
    </div>
</div>
<script src="../js/唯品会.js"></script>

页面的显示效果为：

image.png

然后就剩下js中的操作；
首先我们要把后台的数据渲染进去；

var arr = document.getElementsByClassName(`img`)[0];
var str = ``;
for (var i in data) {
    str += `
    <div class="img">
    <input type="checkbox" name="" id="" ${data[i].isChecked ? `checked` : ``}>
    <img src="../img/${data[i].img}" alt="">
    <p><span>自营|</span>${data[i].name}</p>
    <p>尺码：XL</p>
    <b>￥${data[i].sum}</b>
    <button class="left">-</button>
    <input type="text" value="${data[i].num}" class="text">
    <button class="right">+</button>
    <p class="zong">￥${data[i].yuan_price}</p>
    <p class="shan">删除</p>
</div>`
}
arr.innerHTML = str;

第二步就是获取到我们所需要的节点；切记在获取节点的时候我们要保证获取的准确无误；最好在自己不确定或者没有把握的时候console.log一下，检查自己获取成功没有；
代码为：

var left = document.getElementsByClassName(`left`);
var right = document.getElementsByClassName(`right`);
var int = document.querySelectorAll(`.img input[type=text]`);
var zong = document.getElementsByClassName(`zong`);
var quan = document.getElementsByClassName(`quan`)[0];
var inpc = document.querySelectorAll(`.img input[type=checkbox]`);
var sp = document.getElementsByClassName(`sp`)[0];
var all = document.getElementsByClassName(`all`)[0];
var all_2 = document.getElementsByClassName(`all_2`)[0];
var all_3 = document.getElementsByClassName(`all_3`)[0];
var shan = document.getElementsByClassName(`shan`);

上面的呢就是我们所需要的节点；
现在开启我们的大脑，我的思路呢是先把加号和减号按钮做出来还有input的vlaue的值；
恩，现在我们先想的是当vlaue等于一的时候是否还能使用减号，
那我们就先禁用减号的使用：*disabled：能够禁用button；
其代码为：

for (var j in data) {
    if (data[j].num <= 1) {
        left[j].disabled = true;
    }
}

然后我们先做加号，首先我们要想当我们点击了一下加号之后我们应该把减号启用；
所以：

for (var i = 0; i < data.length; i++) {
    right[i].index = i;
    var nums = 0;
    right[i].onclick = function () {
        left[this.index].disabled = false;//解除减号的封用
        nums = data[this.index].num;
        nums++;
        int[this.index].value = nums;
        data[this.index].num = nums;
        var sums = nums * data[this.index].yuan_price;
        zong[this.index].innerHTML = sums;
        data[this.index].sum = sums;
    }
}

点击减号的代码：当点击加号时我们把减号解除了禁用，但我们考虑到还有使vlaue值为1的时候，所以我们这里还要把它禁用一次；

for (var i = 0; i < data.length; i++) {
    left[i].index = i;
    var nums = 0;
    left[i].onclick = function () {

        nums = data[this.index].num;
        nums--;
        if (nums <= 1) {
            left[this.index].disabled = true;//这一步也是禁用减号，使其不能点击；
        }
        int[this.index].value = nums;
        data[this.index].num = nums;
        var sums = nums * data[this.index].yuan_price;
        zong[this.index].innerHTML = sums;
        data[this.index].sum = sums;
    }
}

然后我们就需要考虑到全选和单选了；
全选的代码：

quan.onclick = function () {
    var is_Checked = quan.checked;
    for (var k = 0; k < inpc.length; k++) {
        inpc[k].checked = is_Checked;
        data[k].isChecked = is_Checked;
    }
}

在这里我新建了一个变量使其等于全选的选中的状态；
用for循环来使每一个单选的在选中状态等于全选的状态；在传回后台数据；
单选的代码：

for (var i = 0; i < inpc.length; i++) {
    inpc[i].index = i;//获取下标
    inpc[i].onclick = function () {
        var val = inpc[this.index].checked;
        data[this.index].isChecked = val;
        var pop = data.every(function (item) {
            return item.isChecked;
        })
        quan.checked = pop
    }
}

这里用到了迭代函数every（）具体的使用方法在我上一遍件数中已经有了解答；就是当每一个单选框的选中状态为true时全选也为true；

下面我们要封装一个函数，使我们排版下面的商品数量和商品金额跟随我们的心意同步；

代码为：

function getSum() {
    var brr = 0, crr = 0;
    for (var i = 0; i < data.length; i++) {
        if (data[i].isChecked == true) {
            brr += data[i].num;
            crr += data[i].sum;
        }
    }
    sp.innerHTML = brr;
    all.innerHTML = crr;
    all_2.innerHTML = crr;
    all_3.innerHTML = crr;
}
getSum();

我们需要把这个函数一一引用到加减点击和单选、全选中去；这里就不展示代码图了，只是一个调用；

最后我们要做删除的点击：
首先也是必不可少的for循环，能够作用到每一个删除上；

for (var i = 0; i < shan.length; i++) {
    shan[i].index = i;
    shan[i].onclick = function () {
        var node = this.parentNode;
        console.log(node)
        node.parentNode.removeChild(node);
        data.splice(this.index, 1);
        getSum();
        xuanRan();
        if(data.length == 0){
            quan.checked = false;
        }
    }
}

恩，这里我单独介绍一下我声明的这一个变量node；this.parentNode：指的是我们删除的父节点也就是我们所需要删除的全部元素；我用现在获取到父节点然后再用删除的父节点的父节点（ps：我这里是因为引用数据的缘故；有不同的请参考自己的排版样式；）来删除父节点；
data.splice：是将后台的数据也给同步删除；
下面的if判断是当后台数据没有时，也是我们将购物车里面的商品全选之后删除使全选处于没选中状态；
接下来就是封装渲染的数据和函数；然胡互相调用；切记数据的封装要先在上方调用一下；

最后的最后我们打开浏览器就可以看到一个购物车已经成型了！！！！