JS的for循环总是弹出最后一个值得解决方法

首先看一下HTML内容：

<div>
   <ul>
       <li>单纯</li>
       <li>善良</li>
       <li>纯真</li>
       <li>坚毅</li>
       <li>果敢</li>
   </ul>
</div>

现在我想得到标签内的索引和内容，你也许刷刷的写下以下代码：

  for (i = 0; i < els.length; i++) {
        var el = els[i];
        var text = el.innerHTML;
        el.onclick = function () {
            alert(i + "---" + text);
        }
    }

但是结果却不尽人意，总是弹出“6----果敢”，比较好的解决方法有以下几种：

1、使用闭包

 var els = document.getElementsByTagName("li");
    for (i = 0; i < els.length; i++) {
        var el = els[i];
        el.onclick = function (i) {
            var text = el.innerHTML;
            return function () {
                alert(i + "---" + text);
            }
        }(i)
    }

注意这里的text变量，如果写在onclick事件外面，即使使用了闭包得出来的标签值也都是最后一个，这是因为onclick事件并不能使用事件外的变量，如果你的变量是在事件外获得的，你可以采用传参的形式进行使用。

2、引入jquery,使用其中的on或delegate进行事件绑定（它们都有事件代理的特性）

$("ul").delegate("li", "click", function(){
        var index = $(this).index();
        var text = $(this).html();
        alert(index + "----" + text);
    });

或者：

 $("ul").on("click", "li", function(){
        var index = $(this).index();
        var text = $(this).html();
        alert(index + "----" + text);
    });

3、 使用ES6中的新特性let来声明变量

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

var myul = document.getElementsByTagName("ul")[0];
var list = myul.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();

个人比较推荐第一种和第二种，第三种有的js版本不支持let形式来声明变量。