input js 离开事件_JS购物车的实现
在电商类项目中，购物车可以说是基本要求了。购物车的综合功能能以及逻辑功能对学习阶段的人来说都能或多或少的提升js知识，锻炼论及能力。
购物车中主要分为全选、店铺、单选、价格几大类。
每个人的编写逻辑风格不同，在此使用以下布局方式。
其中全选的input放在div.all中单放，使用dl包裹一个店铺中的所有商品，可以都多个dl包裹不同的店铺。在每个dl中用dt包裹店铺信息并放置一个input方便实现选中店铺时勾选该店铺内所有商品。之后用dd包裹当前商铺下对应的商品，此处页面并不完善只是加了价格以及一个选择框来相对应实现单选效果使用。
关于效果的顺序可以随意，可以从点击全选开始。首先使用jquery选中div.all中的input标签添加一个change或者click事件都可以，也可以通过时间监听on来添加。监听当全选对应的input状态发生更改时，让所有input的状态跟当前input的状态一致。
每次更改状态后都可以直接循环获取所有选中dd中input所对应的商品价格相加。若是设置有商品个数需要用个数乘上相对应的商品价格再相加，设置给dt后对应的价格。在循环得到所有dt的价格相加设置给总价。
如果点击是取消全选，也会同时计算店铺后总价为0，从而计算商品总价为0。当点击店铺中对应的input时，需要设置当前店铺下对应的所有商品状态跟当前input状态一致。想要获取当前店铺对应的商品可以根据this当前标签选择使用jquery筛选中对应的查找api来找到并设置。
设置状态后需要根据当前店铺下所有选择商品的价格和来设置店铺后对应的价格。再从新获取所有店铺后边的价格计算和设置给总价格。此处计算所有店铺对应的价格和这个效果在全选中也有使用可以选择封装调用。
同时会出现一个问题，若是选中所有店铺后，全选的状态并没有改变。所有需要在点击商铺时同时判断一下是否是素有店铺都是选中状态，如果是则需要设置全选input的状态跟随店铺更改。
最后当单点需要设置给每一个商品所对应的input按钮。当点击单选按钮时，需要获取当前商品所对应的价格设置给店铺后对应的那个价格。之前编写的效果中有获取每个店铺下对应所有选中商品价格的和，可以选择封装多次调用。在设置店铺价格更改时需要同时更改总价的值。上方代码也有重复，可以封装成函数多次分别调用。
点击商品后若是使当前店铺下所有商品选中，同时也需要操作店铺后对应的input选中，如果不是所有都选中的话需要设置店铺对应的不选中。
当然在更改了店铺的状态时就需要再此更改一下全选的选中状态，调用一下已经封装好的函数。
至此购物车的基本效果已经成型。
input js 离开事件_JS购物车的实现相关推荐
- input js 离开事件_js控制input执行onchange事件
js给textbox赋值触发onchange事件的方法 js中onchange事件是在客户端改变输入控件的值,比如一个textbox,会出发的一个事件.但是如果在js代码中改变一个textbox的va ...
- input js 离开事件_听说你熟练使用Vue.js，这9种Vue技术你掌握了吗？
现在,Vue.js已成为前端开发的热门框架.有很多工程师利用Vue.js的便利性和强大功能.但是,我们完成的某些解决方案可能未遵循最佳做法.好吧,让我们看一下那些必备的Vue技术. 1. 函数组件 函 ...
- input js 离开事件_onBlur事件与onfocus事件（js） （光标到达和离开是触发事件）...
[1.回车键触发事件的js代码 在文本框中输入完内容后,经常需要按回车,焦点跳到下个文本框,或者触发按钮事件判断是否按下的为回车非常简单:function EnterPress(){ i o ...
- html5 自动失去焦点,js input失去焦点事件
JS中,何为鼠标失去焦点事件??是onmouseout事件. 用法举例: 鼠标离开文本框的时候触发JS的chk()方法. js 怎样判断ipunt失去焦点 js input失去焦点事件 onfocus ...
- java textvaluechanged 全选删除不触发_js动态改变input的值不触发input的change事件的解决办法...
看了网上的资料也比较杂,自己也做一个整理共享一下解决方案 1.原生js的改变之后手动添加监听 1 2 3 var ttt = document.getElementById("ttt&quo ...
- 鼠标移入与离开事件及页面开关
鼠标移入与离开事件: HTML部分: <!-- 鼠标移入点击时,文本框内部的内容隐藏,离开文本框时显示内部的文字 --> <input type=" ...
- input的onchange事件实际触发条件与解决方法
input中onchange事件已经属于元老级别了,并且现在同onclick一样使用频率很高,然而onchange的机制实际上有很多童鞋并不清楚,我们通过实例来分析这个事件的特征. 触发onchang ...
- JS的事件对象和事件冒泡
2019独角兽企业重金招聘Python工程师标准>>> 1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象 ...
- Hammer.js分析（三）——input.js
input.js是所有input文件夹中类的父类,浏览器事件绑定.初始化特定的input类.各种参数计算函数. Input父类和其子类就是在做绑定事件,各种参数计算.整合.设置等返回自定义事件对象,交 ...
最新文章
- 配置完centos 6以后，大概需要安装的软件（主要是yum）
- python 日期_python日期操作
- WPF 用户控件的使用
- 《Oracle达人修炼秘籍：Oracle 11g数据库管理与开发指南 》一3.6 卸载Oracle 11g产品...
- boost::callable_traits添加volatile成员的测试程序
- 常见Java面试题 在Queue中poll()和remove()有什么区别？
- SAP 电商云 Spartacus UI feature level 的一个测试
- [C++] - C++11 多线程 - Mutex
- POJ 3071 概率DP
- 医疗NLP相关数据集整理
- Atitit.spring体系结构大总结 1. Spel表达式解析 1 2. Srping mvc 1 3. Ioc 4 3.1. ApplicationContext在BeanFactory的基础
- 测试用例之场景法设计
- 为什么很多单片机的工作电压是5v？
- 知道注册电子邮件的方法么？今天就告诉你邮箱申请免费注册的方法！
- android 手机 报证书错误,安卓 ssl证书 安卓ssl证书出现错误的可能原因？ - SSL网...
- [PPPOE]PPPD分析
- 微信小程序-实现元素渐入渐出动画效果-封装方法
- 主板芯片介绍---Intel芯片组(一)
- realme刷机鸿蒙教程,realmeX一键解锁BL教程（realme手机解锁BL详解教程）
- 7-4 最短路径之Dijkstra（朴素dijkstra打印路径）