Web全栈~17.购物车案例(JavaScript动态效果)

不念不忘少年蓝@ 2023-01-07 12:26 82阅读 0赞

# Web全栈~17.购物车案例(JavaScript动态效果) #

## [上一期][Link 1] ##

### 前言 ###

前三期已经对购物车的样式绘制完毕,那么这一期就用JavaScript来实现动态效果。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70]

## 全选 ##

### 思路 ###

可以在input标签里,添加单击事件,并且传递一个this。这个this就会把input本身传递过去。

function cheAllFlag(th){ 
    	//判断本身是否被点击
    	var flag = th.checked;
    	alert(flag);
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 1]

确认用户点击之后,就在下面每个框都加一个name。注意这个name必须都叫一样的名字才好判断。接着使用for循环遍历就行了~

function cheAllFlag(th){ 
    	//判断全选框是否被勾选
    	var flag = th.checked;
    	//获得所有的多选框叫fav的对象
    	var fav = document.getElementsByName("fav");
    	//for循环遍历,如果用户点击了全选那么flag就是true,用户没点击那么flag就是false
    	for(var i in fav){ 
    		fav[i].checked = flag;
    	}
    }

这个时候全选看似是做成功了,但是又有了一个BUG。那就是，假如用户没点全选,而是把商品的勾挨个选,这个时候全选按钮并不会自动勾上。所以这个时候就需要再写一个单击事件分别放在那些商品详情的标签里判断才行~

## 数量增加效果 ##

上一期绘图的时候,忘记考虑到这点。。。所以这里进行改进。数字放在input里面,或许会更容易修改。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 2]

其实也很简单,直接拿到它,然后给加和减都各自添加一个单击事件修改就行了~

/* 增加 */
    function add(th){ 
    	//获得下一个节点对象(因为Input在add的下面)
    	var nex = th.nextElementSibling;
    	//改变节点的value值
    	nex.value = Number (nex.value) + 1;
    }
    /* 减少 */
    function reduce(th){ 
    	//获得上一个节点对象(因为input在reduce的上面)
    	var pre = th.previousElementSibling;
    	//改变节点的值
    	pre.value = Number(pre.value) - 1;
    }

### 结算数量 ###

原理还是和刚刚加减一样。只是选择的标签对象变了而已~

//获得每一个商品的单价
    var val = nex.parentNode.nextElementSibling.innerHTML;
    //计算总价格
    var num = Number(val)*Number(nex.value);
    //把总的价格赋值给指定的对象
    nex.parentNode.nextElementSibling.innerHTML ="￥" + num;

## 删除结点 ##

这个最简单,还是直接传this过来然后remove即可~

//删除指定的节点
    function  checkTest4(th){ 
    	//获得父节点div
    	var div=th.parentNode.parentNode.parentNode;
    	div.remove();
    }

[Link 1]: https://blog.csdn.net/qq_41424688/article/details/112727921
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70]: /images/20221119/24e651d721414af4a10d7a631e911776.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210117215053825.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210117223709910.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4,size_16,color_FFFFFF,t_70