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