【代码健壮性】善用data-属性来关联，慎用parent（）之类的查找结构

1     $(".minus,target").unbind().click(function(){
2             console.log(this);
3             var $thisParent = $(this).parent().parent().parent().parent().prev();
4             var nowNum = $thisParent.find('input').val();
5             console.log(nowNum);
6             $(".spinner",$thisParent).spinner("value",nowNum - 1);
7             $(this).closest(".form-group").remove();
8             $(".spinner-down").trigger("click");
9         }); 

 1  $(".minus,target").unbind().click(function(){
 2           
 3             var currentRow = $(this).closest("[name=spinner_row]");
 4             var $spinner =  $("#" + currentRow.data("relatedSpinner"));
 5             var nowNum = $spinner.val();
 6             console.log(nowNum);
 7             $spinner.closest(".spinner").spinner("value",nowNum - 1);
 8             $(this).closest(".form-group").remove();
 9             $(".spinner-down").trigger("click");
10         }); 

 

上面第一段代码是第一次写的，用了jquery的父元素查找功能特别冗余繁琐并且非常不利于代码的可维护，第二段代码非常好的利用了HTML 5 data- attributes属性

下面是api官网的介绍，介绍的很清楚，以前用的比较少...

 

第二段代码就是把点击模块里面加上一个data-：

var row = '

data-related-spinner="' + $(this).attr('name') + '">'

这个值与要触发的模块的id相同的数据模板值。这样就可以利用点击模块的这个值来调用要触发的模块而不需要根据dom结构来查找，防止html结构的变化导致js代码的失效。

 

 

 

转载于:https://www.cnblogs.com/lijie33402/p/4581478.html