小伙伴们，根据所学知识，使用JS实现案例中的购物车功能。
效果图:
任务要求:
一、扩展document.getElementsByClassName方法。
提示:
1. 判断是否存在document.getElementsByClassName
2. 如果不存在，使用document.getElementsByTagName('*')结合className来模拟
二、定义计算函数getTotal，计算总价格，数目，并更新已选弹层的HTML。
提示: 1. 遍历每一行，判断是否已选。 2.如果已选，分别累加总数，价格，弹层的HTML。 3. 更新累加结果。
注意：如果没有勾选行的时候， 弹层的状态。
三、定义小计价格函数getSubTotal。
提示: 1.接受一个参数tr，为要计算的行。 2.取得数目输入框的值，乘单价。 3. 结果写入小计的单元格。
四、绑定每一行勾选框事件。
提示: 1.遍历每一行，取得勾选框，添加click事件。 2. 判断是否为全选框，如果是，更新所有勾选框。 3. 如果有一个未选择，全选框checked为false。
五、绑定已选按钮事件，用于显示或者隐藏浮层。
提示: 1. 根据foot.className来相应变化，实现隐藏和显示。 2. 如果已选项为0，则不显示。
六、在已选弹层上事件代理，用于删除已选。
提示: 1.根据目标元素的class来判断是否点击了取消选择。 2.取得代表行索引的自定义属性index。 3. 把相应的勾选框去掉勾选。 4.手动触发勾选框的click事件
注意：勾选框事件的手动触发。
七、遍历每一行，绑定事件。
1）在tr上绑定点击事件代理
提示: 1.获取触发元素，取得class。 2.如果class为add， 增加数目，并计算小计价格。 3.如果class为reduce， 减少数目，并计算小计价格。 4.如果class为delete，删除相应的行。 5. 调用计算总数函数getTotal。
注意：IE下event对象存在window下。
2）绑定数量输入框事件，实时更新小计价格
提示: 1.绑定keyup事件。 2.如果输入框的值不是数字或者小于1，重置为1。 3.根据输入框的值，更新减号的显示和隐藏。
八、默认勾选所有商品。
提示: 1.更改全选框的checked为true。 2.触发全选框的click事件。
任务要求在上方:
素材地址:
http://img1.sycdn.imooc.com//53b4c12b0001b0a702200220.jpg
http://img1.sycdn.imooc.com//53b4c149000144b202200220.jpg
http://img1.sycdn.imooc.com//53b4c16000011dfd02200220.jpg
参考代码可在右下角"课件下载"区下载。
请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报