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

标签 javascript events if-statement

这是 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???每个按钮不应该返回不同的值吗???

最佳答案

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

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

并使用警报读取此属性:

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

关于javascript - 尝试了解如何将 If 语句与事件一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17926156/

相关文章:

javascript - 使用 jquery 检查 css 的属性值

javascript - 如何 - 如果 div 有子 div,则展开此 div?

javascript - 在 Firefox Addons 中使用 jQuery

javascript - Vuejs 仅在加载数据后挂载子组件

javascript - jquery.砌体。 imagesLoaded 插件未在 <head> 中运行

c# - F10 键未被捕获

javascript - 加载特定元素后可以调用函数吗?

javascript - 在控制台中显示更改 slider 值

javascript - 如果元素在 javascript/jquery 中可见,则更改变量

javascript - Rails 技术在重定向后执行 javascript