zoukankan      html  css  js  c++  java
  • 闭包和es6实现循环绑定li输出固定索引值

    首先我们需要一个html结构

    <div >
    <ul>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    <li>a</li>
    </ul>
    </div>

    我们遍历ul 下所有的li 并添加点击事件,一般我们会在for循环里面添加点击事件,但是结果和我们所期盼不一样,那么是为什么呢????

    接下来看看我们的js代码

    var li = document.getElementsByTagName('li');
    for(var i = 0;i<li.length;i++){ 
    (function(Index){
    li[i].addEventListener('click',function(e){
    alert('I am link #'+ Index );
    },false);
    })(i)
    }

    我们实现了!!!

    这样就是得来我们想要的效果点击相应的li得来相应的索引。

    简单说一下实现的过程吧

    (function () { /* code */ } ()); // 推荐使用这个
    (function () { /* code */ })(); // 但是这个也是可以用的

    这是我整理立调函数或自执行函数;

    本质上我们是利用闭包的原理实现弹出的索引,我们立调函数传一个参数Index,也就是我们的索引i,在函数里面实现了闭包,

    Index会一直保留在作用域块内,这样我们再点击的时候,会调用作用域名内保存的索引,从而实现我们需要的功能;

    我们几个简单的例子

    function num(){
            var i = 0;
            return function(){
            console.log(i++);
            }
            }
            var counter = num();
            console.log(counter()); // 0     undefined 函数执行完被销毁 
            var counter1 = (function(){
            var i = 0;
            return {
            get:function(){
            return i;
            },
            set:function(val){
            i = val;
            },
            increment:function(){
            return ++i;
            }
            }
            }());     
        console.log(counter1);        //Object
        console.log(counter1.get()); // 0   
        console.log(counter1.set(3)); // undefined
        console.log(counter1.increment()); // 4
        console.log(counter1.increment()); // 5

    ---------------------------------------------------------------------------------------------------------------------------

    如果使用ES6  语法

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <body>
    <ul id="ul1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul>
    <script type="text/javascript">
    // var ul1 = document.getElementById('ul1');
    // for(var i=0;i<document.getElementsByTagName('li').length;i++){
    // document.getElementsByTagName('li')[i].onclick = function(){
    // alert(i);
    // }
    // }
    // --------------------------------------------------------闭包
    // var ul1 = document.getElementById('ul1');
    // for(var i=0;i<document.getElementsByTagName('li').length;i++){
    // (function(i){
    // document.getElementsByTagName('li')[i].onclick = function(){
    // alert(i);
    // }
    // })(i);

    // }

    // -------------------------------------------------------------ES6

    var ul1 = document.getElementById('ul1');
    for(let i=0;i<document.getElementsByTagName('li').length;i++){
    document.getElementsByTagName('li')[i].onclick = function(){
    alert(i);
    }


    }

    </script>
    </body>
    </html>

    前端笔记0-0
  • 相关阅读:
    Leetcode 811. Subdomain Visit Count
    Leetcode 70. Climbing Stairs
    Leetcode 509. Fibonacci Number
    Leetcode 771. Jewels and Stones
    Leetcode 217. Contains Duplicate
    MYSQL安装第三步报错
    .net 开发WEB程序
    JDK版本问题
    打开ECLIPSE 报failed to load the jni shared library
    ANSI_NULLS SQL语句
  • 原文地址:https://www.cnblogs.com/qdcnbj/p/8051435.html
Copyright © 2011-2022 走看看