一、设计思路及实现方法
1、首先采用<table>标签创建一个表单来建立购物车,其中包括商品名称、数量、单价、小计、操作五个板块;
2、用JSON数据对象渲染菜单页面,遍历JSON,运用模板字符串在页面展示,让用户能够看到详细菜单;
3、采用for循环遍历购物车中各商品数量、各商品的小计,再运用coutTotal函数返回商品小计;
4、采用函数对购物车的菜品、数量进行增加、减少的操作,并对价格进行修改;
二、核心代码及注解
1、
注释:运用表格表单相关标签创建一个购物车表格,其中colspan用来设置表格的列数为5;
2、
注释:绑定JSON数据对象,通过调用JSON 文件来引入菜品信息,在运用for循环语句来依次遍历文件,使得每一个数据都输出;
3、
注释:运用for循环遍历购物车中各商品数量和商品的小计,再运用coutTotal函数将所有数返回到总价格中;
4、
注释:在购物车中点击删除可直接删除菜品,同时运用confirm来弹出提示框询问是否确定删除。
三、反思
该课程项目存在一些问题,例如,不能直接在购物车里面对菜品的数量进行输入修改,需要在后续加以改进。