超详细购物车案例js实现购物车上【2021.10.10】

一、前言

        本文所用的代码是之前看一个大大所写的，忘记大大名字了，侵权立删。实现购物车的方法有很多，我们不应该把重心放在代码上，而是应该放在功能上和逻辑上，这样再复杂的项目，也能从众多功能中一步一步下手。不会代码我们可以去查，直到实现功能为止。

二、功能

1.全选按钮

• 点击后反选按钮的状态改为未选中状态
• 判断点击后是否为选中状态，是则选中所有单选按钮并通过改变classname从而改变背景颜色，否则取消所有单选按钮

2.反选按钮

• 点击后通过逻辑运算符！改变单选按钮的选中状态
• 判断点击后否为选中状态，是则改背景，否则让全选按钮为非选中状态且改回背景

3.单选按钮

• 点击后是选中状态则改变背景色
• 非选中状态则改回背景色，并取消全选按钮的选中状态

4.数量文本框

• 可以用键盘上的数字和删除按钮backsp进行操作，其它按钮显示NaN（不是数值）
• 当文本框值为0或空值时，让文本框的值改为1
• 文本框中的值为大于1的数字时，计算小计的值，刷新总价格的值

5.控制数量的加减按钮

• 点击减少按钮，先判断是否为1，为1则提示不能减了1，不为1则做自减计算小计刷新总价
• 点击加按钮，做自加，计算小计刷新总价

6.删除按钮

• 使对应的商品从列表中删除
• 重新给所有对象加索引值
• 刷新总价

7.小计

• 设置形参，通过价格=单价*数量得到小计

8.总价

• .遍历所有的小计，挨个相加得到总价

三、代码部分

.今天先放上部分代码，下章奉上所有代码

    
    
    
    
    


    

        

            

                全选
            
            
商品名称
            
图片
            
单价
            
数量
            
小记
            
操作
        

        


        

        

            

                反选
            
            

                总结：0￥
            
            

                去结算>