zoukankan      html  css  js  c++  java
  • 【代码健壮性】善用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 = '<div class="form-group" name="spinner_row" data-related-spinner="' + $(this).attr('name') + '">'

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

     

  • 相关阅读:
    Java基础教程:Java内存区域
    Java基础教程:多线程基础——线程池
    微服务实践:服务治理
    微服务实践:服务设计
    微服务实践:什么是微服务
    SpringBoot学习笔记:读取配置文件
    Java进阶教程:使用Lombok提升开发效率
    Sagas模式
    执行力:Just Do It
    执行力:Just Do It
  • 原文地址:https://www.cnblogs.com/lijie33402/p/4581478.html
Copyright © 2011-2022 走看看