购物车页面遇到的一些问题

作为前端初学者,购物车功能还没有实现过真是惭愧

参加慕课网上一个课程要求我们做出购物车页面样式以及实现

样式实现的差不多,但是交互一直拖着

果然一开始就遇到很多问题,和一些其他初学者分享一下,大神就不要来嫌弃我了

1.全选

百度知道

在百度上找到这个关于全选按钮的 DEMO

之前用的 getAttribute 和 setAttribute,没有人家写的方便,还没有效果

实战经验还是太差了

购物车页面遇到的一些问题_第1张图片


2.绑定

没想到居然没注意在事件绑定上又栽进了坑里

在 for 循环里面进行多个按钮绑定的时候一定记得运用函数把绑定事件的代码包起来,传入参数 i !!!!不然每次都会绑定在最后一个元素(或者没有元素)!!!

for 循环中的 (function(i){...})(i) !!!!!!

没有把绑定事件放在函数里面的时候,会出错!找不到绑定元素,因为 i 变成了 4,而下标最多只到 3 ,结果就是找不到 num[i] 元素。

幸好及时发现这个错误,不然不知道找错误耽误到何年何月,谨记谨记

购物车页面遇到的一些问题_第2张图片


3.函数分配

六个函数实现六个功能

其中最重要的是计算函数 count(),基本上每个函数都需要调用到

初始化函数 init() 默认在打开页面时,将商品全选

购物车页面遇到的一些问题_第3张图片

当有一个商品前面的选择框没有勾选时,全选框的勾选要取消

select() 函数

购物车页面遇到的一些问题_第4张图片

实现三种方法修改商品数量的函数,输入,+按钮,-按钮

购物车页面遇到的一些问题_第5张图片


购物车页面遇到的一些问题_第6张图片


购物车页面遇到的一些问题_第7张图片

最后一个函数是实现将鼠标移到微信图标时,显示二维码

购物车页面遇到的一些问题_第8张图片

你可能感兴趣的:(购物车页面遇到的一些问题)