Question

这是HTML

<body>
 <div>
   <button>
     Button 1
   </button>

   <button>
    Button 2
   </button>

   <button>
    Button 3
   </button>
 </div>
</body>    (script tag is in right place just left it out here)

这是我的代码

(function () {

var button= document.getElementsByTagName("button");    

for (var i= 0, len= button.length; i < len ;i = i + 1) {

buttton[i].onclick = function () {
        alert(i)};

}
}())

所以，当我点击每个按钮时，为什么所有3都带回3值？不应该每个按钮带回不同的价值??????

Answer 1

当您循环遍历按钮集合时，您将为每个按钮分配一个在单击时执行的功能。此功能提供并警告显示i的值。当循环完成时，i的值设置为3，这就是您所看到的。如果希望每个按钮显示自己的序号，可以在循环内设置一个属性：

button[i].setAttribute("ordinal",i);

并使用读取此属性的提醒：

button[i].onclick = function(){
    alert(this.getAttribute("ordinal"));
}

Answer 2

您需要隔离范围（通过闭包）以使其正常工作。我的下面的示例包含一个立即执行函数并返回一个捕获循环变量的新函数。

(function() {

  var buttons = document.getElementsByTagName("button");

  for(var i = 0; i < buttons.length; i++)
  {    
    buttons[i].onclick=(function(){      
      var n = i;
      return function(){
        alert(n);
      };
    })();
  }

})();

Answer 3

尝试：

(function () {

var button= document.getElementsByTagName("button");

for (var i= 0, len= button.length; i < len ;i = i + 1) {
    button[i].current_i = i;
    button[i].onclick = function () {
        alert(this.current_i);
    };
} 

})()

通过将“i”的当前值设置为按钮的对象变量，可以保存其状态。这与Javascript的函数作用域而不是对象作用域有关。

干杯！

试图了解如何将If语句与事件一起使用

3 个答案: