• 关于获得当前的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);
     })

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

      谢谢浏览!

  • 相关阅读:
    LeetCode "Palindrome Partition II"
    LeetCode "Longest Substring Without Repeating Characters"
    LeetCode "Wildcard Matching"
    LeetCode "Best Time to Buy and Sell Stock II"
    LeetCodeEPI "Best Time to Buy and Sell Stock"
    LeetCode "Substring with Concatenation of All Words"
    LeetCode "Word Break II"
    LeetCode "Word Break"
    Some thoughts..
    LeetCode "Longest Valid Parentheses"
  • 原文地址:https://www.cnblogs.com/adouwt/p/6403957.html
Copyright © 2020-2023  润新知