$(".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()之类的查找结构的更多相关文章

  1. 使用python3的typing模块提高代码健壮性

    前言:很多人在写完代码一段时间后回过头看代码,很可能忘记了自己写的函数需要传什么参数,返回什么类型的结果,就不得不去阅读代码的具体内容,降低了阅读的速度,加上Python本身就是一门弱类型的语言,这种 ...

  2. python3.5以上版本,typing模块提高代码健壮性

    一 前言 Python是一门弱类型的语言,很多时候我们可能不清楚函数参数类型或者返回值类型,很有可能导致一些类型没有指定方法,在写完代码一段时间后回过头看代码,很可能忘记了自己写的函数需要传什么参数, ...

  3. jQuery Validate 表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...

  4. strcpy之代码的健壮性与可维护性

    strcpy   函数的原型是: char * strcpy(char * strDest,const char * strSrc);    功能:把从strSrc地址开始且含有NULL结束符的字符串 ...

  5. 《Entity Framework 6 Recipes》中文翻译系列 (27) ------ 第五章 加载实体和导航属性之关联实体过滤、排序、执行聚合操作

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-9  关联实体过滤和排序 问题 你有一实体的实例,你想加载应用了过滤和排序的相关 ...

  6. HTML data属性简介以及低版本浏览器兼容算法

    实例 使用 data-* 属性来嵌入自定义数据: <ul> <li data-animal-type="bird">Owl</li> <l ...

  7. jquery data属性 attr vs data

    html5的自定义data属性相信大家都不会陌生,有了它你可以绑定所需的数据到指定元素上.然后通过jquery设置.获取数据,简直开心的不行啊.想到设置.获取元素属性值,大家一定首先想到了jquery ...

  8. 使用 CSS perfer-* 规范,提升网站的可访问性与健壮性

    文本将介绍 CSS 媒体查询中新增的几个特性功能: prefers-reduced-motion prefers-color-scheme prefers-contrast prefers-reduc ...

  9. JS组件系列——使用HTML标签的data属性初始化JS组件

    前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...

随机推荐

  1. 作业(二)—python实现wc命令

    Gitee地址:https://gitee.com/c1e4r/word-count(为什么老师不让我们用github) 0x00 前言 好久没发博客了,感觉自己的学习是有点偷懒了.这篇博客也是应专业 ...

  2. Linux: 给右键菜单加一个“转换图片为jpg格式”

    Linux上通常都会安装imagemagick这个小巧但又异常强大的工具.这个软件提供了一系列很好用的功能.这里说一说如何使用它的convert命令转换图片为jpg格式,以及如何把它添加到Thunar ...

  3. django中动态生成二级菜单

    一.动态显示二级菜单 1.修改权限表结构 (1)分析需求,要求左侧菜单如下显示: 客户管理: 客户列表 账单管理: 账单列表 (2)修改rbac下的models.py,修改后代码如下: from dj ...

  4. Django Rest框架 流程详解

    什么是Restful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移” REST从资源的角度类审 ...

  5. java面试题最容易犯错

    1. static 和 final 的用法 static 的作用从三个方面来谈,分别是静态变量.静态方法.静态类. 静态变量:声明为 static 的静态变量实质上就是全局变量,当声明一个对象时,并不 ...

  6. 【Java程序】约瑟夫环

    今天看视频教程无意间看到了一个数3减1的问题,百度之发现叫约瑟夫环问题,于是写了程序,问题大致描述如下: 一群带有编号的孩子手拉手围成一个圈报数,开始的孩子数1,他右边数2,再右边数3,数到n的孩子o ...

  7. JindoFS解析 - 云上大数据高性能数据湖存储方案

    JindoFS背景 计算存储分离是云计算的一种发展趋势,传统的计算存储相互融合的的架构存在一定的问题, 比如在集群扩容的时候存在计算能力和存储能力相互不匹配的问题,用户在某些情况下只需要扩容计算能力或 ...

  8. zk 后台调用前台点击事件

    Events.echoEvent(new Event(Events.ON_CLICK, view.getFellow("showYjdkhMessage"))); showYjdk ...

  9. vue-element-admin安装失败的问题

    根据官网的介绍,从GitHub下载以后,安装依赖的时候一直不成功,试了很多办法,最终解决 先记录错误的过程: 从GitHub下载 在当前文件夹的地址栏输入 “cmd” 打开窗口 输入 npm inst ...

  10. [NOIP模拟测试31]题解

    A.math 考场乱搞拿了95,2333. 考虑裴蜀定理:$ax+by=z$存在整数解,当且仅当$gcd(a,b)|z$. 那么如果某个数能够被拼出来,就必须满足所有$a_i$的$gcd$是它的因子. ...