javascript - 点击ul下面的li，弹出当前li的index

问题描述

问 题

这个是之前面试的一道题，当时给的答案是类似下面这种：

var nodes = document.getElementsByTagName("li");
for(i = 0;i<nodes.length;i+= 1){
        nodes[i].onclick = (function(i){
                  return function() {
                     console.log(i);
                  } 
        })(i);
}

然后回来网上搜了搜，结果发现答案基本就是这一种，当时那个面试官对我这答案感觉不满意，问我还有别的方法实现么，我说不知道= =

这里问问大家，要是你，你会怎么回答这到问题呢？

解决方案

方式1. 使用闭包。

var ul = document.getElementsByTagName("ul")[0];  
var list = ul.getElementsByTagName("li");  

function foo(){  
    for(var i = 0, len = list.length; i < len; i++){  
        var that = list[i];  
        list[i].onclick = (function(k){  
            var info = that.innerHTML;  
            return function(){  
                alert(k + "----" + info);  
            };  
        })(i);  
    }  
}  

foo();  

方式2.事件代理

var ul = document.querySelector('ul');  
var list = document.querySelectorAll('ul li');  
  
ul.addEventListener('click', function(ev){  
    var ev = ev || window.event;  
    var target = ev.target || ev.srcElemnt;  
  
    for(var i = 0, len = list.length; i < len; i++){  
        if(list[i] == target){  
            alert(i + "----" + target.innerHTML);  
        }  
    }  
});  

方式3. 引入jQuery,使用其中的on或delegate进行事件绑定（它们都有事件代理的特性）

// delegate方法
$("ul").delegate("li", "click", function(){  
    var index = $(this).index();  
    var info = $(this).html();  
    alert(index + "----" + info);  
});  
 // on方法
$("ul").on("click", "li", function(){  
    var index = $(this).index();  
    var info = $(this).html();  
    alert(index + "----" + info);  
});  

方式4. 使用ES6中的新特性let来声明变量
用let来声明的变量将具有块级作用域，很明显可以达到要求，不过需要注意的是得加个'use strict'（使用严格模式）才会生效。

var ul = document.getElementsByTagName("ul")[0];  
var list = ul.getElementsByTagName("li");  
  
function foo(){'use strict'  
    for(let i = 0, len = list.length; i < len; i++){  
        list[i].onclick = function(){  
            alert(i + "----" + this.innerHTML);  
        }  
    }  
}  
foo();  

这篇关于javascript - 点击ul下面的li，弹出当前li的index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！