【代码健壮性】善用data-属性来关联,慎用parent()之类的查找结构
$(".minus,target").unbind().click(function(){
console.log(this);
var $thisParent = $(this).parent().parent().parent().parent().prev();
var nowNum = $thisParent.find('input').val();
console.log(nowNum);
$(".spinner",$thisParent).spinner("value",nowNum - 1);
$(this).closest(".form-group").remove();
$(".spinner-down").trigger("click");
});
$(".minus,target").unbind().click(function(){
var currentRow = $(this).closest("[name=spinner_row]");
var $spinner = $("#" + currentRow.data("relatedSpinner"));
var nowNum = $spinner.val();
console.log(nowNum);
$spinner.closest(".spinner").spinner("value",nowNum - 1);
$(this).closest(".form-group").remove();
$(".spinner-down").trigger("click");
});
上面第一段代码是第一次写的,用了jquery的父元素查找功能特别冗余繁琐并且非常不利于代码的可维护,第二段代码非常好的利用了HTML 5 data- attributes属性
下面是api官网的介绍,介绍的很清楚,以前用的比较少...

第二段代码就是把点击模块里面加上一个data-:
var row = '<div class="form-group" name="spinner_row" data-related-spinner="' + $(this).attr('name') + '">'
这个值与要触发的模块的id相同的数据模板值。这样就可以利用点击模块的这个值来调用要触发的模块而不需要根据dom结构来查找,防止html结构的变化导致js代码的失效。
【代码健壮性】善用data-属性来关联,慎用parent()之类的查找结构的更多相关文章
- 使用python3的typing模块提高代码健壮性
前言:很多人在写完代码一段时间后回过头看代码,很可能忘记了自己写的函数需要传什么参数,返回什么类型的结果,就不得不去阅读代码的具体内容,降低了阅读的速度,加上Python本身就是一门弱类型的语言,这种 ...
- python3.5以上版本,typing模块提高代码健壮性
一 前言 Python是一门弱类型的语言,很多时候我们可能不清楚函数参数类型或者返回值类型,很有可能导致一些类型没有指定方法,在写完代码一段时间后回过头看代码,很可能忘记了自己写的函数需要传什么参数, ...
- jQuery Validate 表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...
- strcpy之代码的健壮性与可维护性
strcpy 函数的原型是: char * strcpy(char * strDest,const char * strSrc); 功能:把从strSrc地址开始且含有NULL结束符的字符串 ...
- 《Entity Framework 6 Recipes》中文翻译系列 (27) ------ 第五章 加载实体和导航属性之关联实体过滤、排序、执行聚合操作
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-9 关联实体过滤和排序 问题 你有一实体的实例,你想加载应用了过滤和排序的相关 ...
- HTML data属性简介以及低版本浏览器兼容算法
实例 使用 data-* 属性来嵌入自定义数据: <ul> <li data-animal-type="bird">Owl</li> <l ...
- jquery data属性 attr vs data
html5的自定义data属性相信大家都不会陌生,有了它你可以绑定所需的数据到指定元素上.然后通过jquery设置.获取数据,简直开心的不行啊.想到设置.获取元素属性值,大家一定首先想到了jquery ...
- 使用 CSS perfer-* 规范,提升网站的可访问性与健壮性
文本将介绍 CSS 媒体查询中新增的几个特性功能: prefers-reduced-motion prefers-color-scheme prefers-contrast prefers-reduc ...
- JS组件系列——使用HTML标签的data属性初始化JS组件
前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...
随机推荐
- WebAPI 生成验证码
private HttpResponseMessage CreateCheckCodeImage(string checkCode) { HttpResponseMessage result = ne ...
- Mongo导出、导入
1.mongodb 数据导出: connection options: /h, /host:<hostname> mongodb host to connect to (setname/h ...
- OpenCV常用基本处理函数(7)图像金字塔和直方图
高斯金字塔 高斯金字塔的顶部是通过将底部图像中的连续的行和列去除得到的.顶部图像中的每个像素值等于下一层图像中 5 个像素的高斯加权平均值. 这样操作一次一个 MxN 的图像就变成了一个 M/2xN/ ...
- springboot配置redis+jedis,支持基础redis,并实现jedis GEO地图功能
Springboot配置redis+jedis,已在项目中测试并成功运行,支持基础redis操作,并通过jedis做了redis GEO地图的java实现,GEO支持存储地理位置信息来实现诸如附近的人 ...
- MAT内存分析
先下载 http://www.eclipse.org/mat/downloads.php 配置环境参数 分析一个堆转储文件需要消耗很多的堆空间,为了保证分析的效率和性能,在有条件的情况下,建议分配给 ...
- 4K超清,2500万人在线,猫晚直播技术全解读
摘要: 作为双11的必备节目,今年的猫晚通过优酷.浙江卫视.东方卫视进行了全程网络直播和电视直播,吸引了超过全球超过2.4亿人收看.猫晚期间,优酷基于阿里云最新的广播级高可靠直播方案,为近2500万的 ...
- nucleus plus代码学习
int.S: ;************************************************************************ ;* ;* FUNCTION ;* ; ...
- iframe中涉及父子页面跨域问题
什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加的安全限制.所谓同源是指相同的域名.协议和端口,只要其中一项不同就为跨域. 举几个例子: http:/ ...
- 树状数组,Fenwick Tree
Fenwick Tree, (also known as Binary Indexed Tree,二叉索引树), is a high-performance data structure to cal ...
- Django基础篇(一)
Python的Web框架有Django.Tornado.Flask等多种,Django相较其他web框架的优势有: 大而全.框架本身集成了ORM框架.模板绑定.缓存.Session等诸多功能. 1.安 ...