zoukankan      html  css  js  c++  java
  • 关于获得当前的index的方法

      每日一句English(start from today):

      In the previous section we just displayed a list of string entered statically in the Python code.(源于odoo的开发文档)。

         翻译:在上一节中我们只显示一个列表的字符串输入静态的Python代码。(百度翻译)

        在群里看见有人问了关于,获得当前对象的index值得时候,我做了demo ,获得了当前的index,方法多种,下面我就用我的方法来讲解我的代码:

      模拟数据:div里面5个button

    1 <div>
    2         <button>1</button>
    3         <button>2</button>
    4         <button>3</button>
    5         <button>4</button>
    6         <button>5</button>
    7 </div>
    下面就是关于取这个index的for循环代码:
    <script>
            var obj = document.getElementsByTagName("button");
            for(var i = 0;i < obj.length;i++) {
                (function(i){
                    obj[i].onclick = function(){
                        console.log(i);
                    }
                })(i);
            }
    </script>


      对于这个闭包需要讲解一下:可能大多数同学在不理解onclick的时候,就会发现他们获得值就是最后一个值,会写下这么的一串代码
    for(var i = 0;i < obj.length;i++) {
    	obj[i].onclick = function(){
    	  console.log(i+1);
         }
    }
    

      如图错误:

      

      onclick这个点击函数是异步执行的,也就是说在点击获得值得时候,循环已经结束,到达最后一个值,这时候i的值为5.所以,每次点击的时候,都是获得一样的值。因此,如果想获得里面的i的值的时候就需要将i值包裹起来,就需要用这样的闭包形式,函数自调传入当前的i。每次循环一次,就会让函数自调一次,输出当前的i.索引值是从0开始的,这里加1是想让他输出button的序号。正确所示:

      

      顺便附上关于jq的写法:这里就不用考虑闭包了,都在jq的index这个方法包裹在里,有兴趣的同学可以去找这段jq的源码,来看看这个index的方法是怎么样封装的。

    $("button").click(function(){
         var index = $("button").index(this);
         console.log(index);
     })

      具体关于闭包的详细解析:我会在在下篇 【闭包的理解】,详细讲解我对于闭包的理解。

      谢谢浏览!

  • 相关阅读:
    python join的用法
    python json中的 dumps loads函数
    ubuntu 初始配置
    如何为ubuntu配置java环境
    Ubuntu系统如何安装软件
    取模与取余
    基本数据类型
    js面试题——作用域和闭包
    js面试题-原型和原型链
    js面试题-变量类型和计算
  • 原文地址:https://www.cnblogs.com/adouwt/p/6403957.html
Copyright © 2011-2022 走看看