js下 Day20、综合案例

一．购物车

效果图:

功能思路分析:

1. 面向对象框架

2. 模拟数据

1.多个店铺数组套对象

2.每个店铺多个商品，数组套对象

3. 渲染数据

先渲染店铺，在渲染店铺中嵌套渲染商品

4. 加购物车

\1. 点击加号按钮计算小计: 小计 = 数量 * 单价

\2. 调用合计方法

5. 减购物车

\1. 点击减号按钮计算小计: 小计 = 数量 * 单价

\2. 判断数量是否小于1

\3. 调用合计方法

6. 合计

\1. 通过选择器查找**( querySelectorAll(‘input.shop:checked’))**,找到所有被选中的商品

\2. 循环拿到每一个商品的数量和小计累加在一起

7. 商品选中

\1. 找到当前店铺下所有的商品

\2. 通过数组的**every()**方法判断，当所有商品都被选中，店铺也被选中

8. 店铺选中

\1. 找到当前店铺下所有的商品

\2. 当前店铺下所有商品的选中状态跟店铺的选中状态保持一致

\9. 删除商品

\1. 点击删除按钮找到对应的商品删除**( removeChild() )**

\2. 当店铺中没有商品时，店铺也跟着删除

#二．今日小结

\1. 上一个元素兄弟节点: previousElementSibling

\2. 下一个元素兄弟节点: nextElementSibling

\3. 父节点: parentNode

\4. 删除节点: removeChild()

\5. 复选框的选中状态: checked

\6. 数组方法every: 每一项都为真时返回true，否则返回false

#三．作业

效果图:

功能思路分析:

1. 菜单显示隐藏

\1. 给文本框绑定获取焦点事件(focus)，修改菜单盒子的display样式为block

\2. 给关闭按钮绑定点击事件，修改菜单盒子的display样式为none

2. 渲染一级数据

\1. 封装一个渲染方法render

\2. 盒子显示后默认先渲染一级菜单

3. 渲染二级数据

\1. 给大盒子绑定点击事件，通过事件委托找到对应的一级数据

\2. 点击一级数据时渲染二级数据

\3. 封装一个高亮显示方法，当前点击的高亮显示

4. 渲染三级数据

\1. 在大盒子的事件委托中继续判断点击的数据是不是二级数据

\2. 是则渲染三级数据，并调用高亮方法

5. 点菜

\1. 点击三级数据时，将选中的菜创建到第四个盒子中

\2. 已选数量累加

6. 删除点菜

\1. 点击X时，删除当前选中的菜

\2. 已选数量递减

7. 清空点菜

\1. 点击清空时，删除所有选中的菜

\2. 已选数量为0

8. 确定点菜

\1. 点击确定时，拿到所有选中的菜名，通过split（）方法，用&连接在一个。

\2. 将连接后的字符串放入文本框中

\3. 隐藏菜单盒子