0

Here is the 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)

Here is my code

(function () {

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

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

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

}
}())

So when I click on each button why are all 3 bringing back a value of 3??? Shouldn't each button bring back a different value??????

4

3 回答 3

3

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

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

并使用警报读取此属性：

button[i].onclick = function(){
    alert(this.getAttribute("ordinal"));
}
于 2013-07-29T14:12:22.360 回答
0

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

(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);
      };
    })();
  }

})();
于 2013-07-29T14:42:39.643 回答
0

尝试：

(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 的函数范围而不是对象范围有关。

干杯!

于 2013-07-29T14:43:17.153 回答