Question

我有5个按钮，我无法更改DOM，无法使用id和name属性，也无法使用innerHTML，现在我需要提供输出，就像我点击按钮1时应该给出一个警告，例如“你点击按钮＃1 “并且所有5个按钮都将继续相同。我想要打印i的值。现在我遇到了两个解决方案：

HTML部分：

    //creating 5 buttons
        <button>one</button>
        <button>two</button>
        <button>three</button>
        <button>four</button>
        <button>five</button>

第一个解决方案：

            /* here I am always having you clicked element #5*/
           var nodes = document.getElementsByTagName('button');//getting    references
       var counter;
       for (var i = 0; i < nodes.length; i++) {
         nodes[i].addEventListener('click', function() {
              alert('You clicked element #' + i);
            });
        } //which is not working

第二个解决方案：

    /* here I am getting correct output*/


var nodes = document.getElementsByTagName('button');
   var counter;
    for (var i = 0; i < nodes.length; i++) {
          assignEvent(nodes[i], i);
    }

 function assignEvent(node, i){
        node.addEventListener('click', function(){
            alert('You clicked element#' + (i+1));
        });
    }//this one is working

现在我的问题是为什么解决方案2正在运行但解决方案1没有..请帮助。为什么解决方案2正确地承载了i的值，而不是解决方案1。

Answer 1

在您的第一个解决方案中，当您添加匿名函数作为addEventListener的参数时，警告消息正在查找 i 的最后一个值，在这种情况下i = 5，这是因为您没有＆＃39 ; t在函数中将变量设置为local，因此，如果全局变量，则只有可能的值。

如果你想这样做，试试这个：

        var nodes = document.getElementsByTagName('button');//getting    references

        function alertMessage(i){
            alert('You clicked element#' + (i+1));
        }

        for (i = 0; i < nodes.length; i++) {
            nodes[i].addEventListener('click', alertMessage.bind(null,i) , false);
        }

我还建议您lecture

Answer 2

如果您不想创建其他功能，只需将事件监听器分配包装在您通过的自动调用匿名函数中，即可：

：

var nodes = document.getElementsByTagName('button');
var counter;
for (var i = 0; i < nodes.length; i++) {
    (function(j) {
        nodes[i].addEventListener('click', function() {
            alert('You clicked element #' + (j+1));
        });
    })(i);
}

jsfiddle here：http://jsfiddle.net/vu31aa7y/

Answer 3

你可以这样写：

[].forEach.call(document.getElementsByTagName('button'),
    function(elt, index) {
        elt.addEventListener('click', function() {
            alert('You clicked element #' + (index + 1));
        }, false);
});

可变范围的Javascript概念

3 个答案: