JS购物车的实现与保姆级详细讲解(一)

JS购物车的实现与保姆级详细讲解

1.话不多说，我们先放截图，有兴趣的同学可以接着往下看，没兴趣的同学也不会浪费掉自己的宝贵时间，相关代码地址放在文章末尾。

2.可以看到，此购物车有如下功能，商品的累加累减，合计数量，以及总花费金额和最高商品单价，首先案例结构如下：

3.代码量相比其他项目或者案例，并不算太多，相对来说也好理解，整个购物车分为上下两个主要部分，即最上层的ul和最下层的class叫做info的div标签。

ul里细分为5个小li：

4.这五个小li对应着购物车的每一件商品，其中购物车的商品数量部分由两个i标签和一个em标签所组成，em标签众所周知由强调文本并且倾斜的作用，i标签也具有倾斜作用，但在本项目中i标签作为伪类使用，为i标签绑定±图片，

5.购物车的右侧由span标签包着两个strong，用于将元素对strong进行插入，达到累积的目的。
6.info部分与之同理，篇幅问题不在过多赘述
7.下面是js部分
首先定义两个变量对标签和元素进行接收

list用来获取全文中每一个li，ems则获取每一个em标签，em标签可以理解为商品的数量。接下来，我们为每一个li绑定点击事件，这需要用到for循环

这样可以使每一个list当中5个li一次不落的执行addclick；
8.addclick部分
首先，当前的li会被当作参数传给addclick函数，add函数会通过参数确定当前定义的三个接受变量的范围。

请注意，文中所获取的类数组集合i，元素集合strong，em都是被传递过来的li进行调用的，而不是document，这就使这三个变量符合当前的li，不会和外界有混淆。 下面我们以变量名加中括号的方式为每一个i绑定点击事件，每一个li中有上下两个i，第一个下标为0的i代表减，我们先从减开始说，首先在做减法之前，我们为避免商品数量为负数，先做一个限制，如果商品数量小于零就设置为零，注意，要把这个条件放在最前面，因此放在后面减法已经做完，判断则毫无意义。

如果上述条件不成立，即商品数量大于1，则进行累减1，执行后再用当前商品的数量乘以当前商品的单价，记住，因为第一个设定价格的strong标签里含有汉字，需要对其进行parseFloat，em也需要用Number()进行数字转换，计算结果插入到第二个strong标签，就成为了本列商品的总价。

加法以此类推

9. function computed函数
到了这里，本次项目进本接近尾声，computed() 用于对商品数量总和、商品小计总和、最贵的商品单价进行计算。 我们在computed中定义三个变量

最后一个变量声明为数组，后面紧跟一个for循环

// An highlighted block
  for(var i = 0;i<list.length;i++){
                // 循环得到每一个li中的em元素
                let em = list[i].getElementsByTagName('em')[0];//获取每一个li的商品数量
                let strongs = list[i].getElementsByTagName('strong');//获取每一个li的商品总价
                total+= Number(em.innerText); // 把每一个商品数量的值累加起来

                allPrice+=parseFloat(strongs[1].innerText); // 把每一个小计的值累加起来

                if(Number(em.innerText)>0){
                    // 如果当前li的em大于0,说明用户已经购买了当前商品，那咱们就把当前商品的单价push到数组中
                    ary.push(parseFloat(strongs[0].innerText))
                }
             }

如代码所示意， 我们要获取每一个li的商品数量、获取每一个li的商品总价、把每一个商品数量的值累加起来、把每一个小计的值累加起来。info结构如下

然后进行判断如果当前li的em大于0,说明用户已经购买了当前商品，那咱们就把当前商品的单价push到数组中，为了最后的sort排序做准备，更好的筛选最大值，接着将商品的总价，花费依次插入到em中，最后用sort进行降序，拿到第一次最大值处插入到em中，就完成了。

购物车资源，免费自取，链接失效或者有其他问题可评论，随时回复
感谢大家的浏览，如果喜欢的话不妨点个关注，下期再见!