在电商类项目中,购物车可以说是基本要求了。购物车的综合功能能以及逻辑功能对学习阶段的人来说都能或多或少的提升js知识,锻炼论及能力。
购物车中主要分为全选、店铺、单选、价格几大类。
每个人的编写逻辑风格不同,在此使用以下布局方式。
其中全选的input放在div.all中单放,使用dl包裹一个店铺中的所有商品,可以都多个dl包裹不同的店铺。在每个dl中用dt包裹店铺信息并放置一个input方便实现选中店铺时勾选该店铺内所有商品。之后用dd包裹当前商铺下对应的商品,此处页面并不完善只是加了价格以及一个选择框来相对应实现单选效果使用。
关于效果的顺序可以随意,可以从点击全选开始。首先使用jquery选中div.all中的input标签添加一个change或者click事件都可以,也可以通过时间监听on来添加。监听当全选对应的input状态发生更改时,让所有input的状态跟当前input的状态一致。
每次更改状态后都可以直接循环获取所有选中dd中input所对应的商品价格相加。若是设置有商品个数需要用个数乘上相对应的商品价格再相加,设置给dt后对应的价格。在循环得到所有dt的价格相加设置给总价。
JS购物车的实现
最新推荐文章于 2024-06-18 17:19:20 发布