Question

我试图迭代一个数组并对每个项目应用onclick事件。我希望能够点击我的每个div并让他们控制台记录他们的价值。现在，我仍然坚持如何将onclick应用于每个div。我是JS的新手，所以我并不完全清楚为什么我不应该在JSBin抱怨的循环中创建一个函数。我已经用很多不同的方法搞砸了，但我真的被卡住了......

JSBin

function numberTrack() {

  var gridItems = document.getElementsByClassName("grid");

  for (var i = 0; i < gridItems[0].length; i ++) {
    gridItems.onclick = function(){
      alert("hello");
    };
  }
}

numberTrack();

Answer 1

JSBin抱怨是因为它希望你在for循环之外声明该函数，然后在for循环中分配它。这比您当前正在执行的操作更有效，即为数组中的每个项目分配新的匿名函数。所有这些相同的功能必须分别创建并存储在内存中。

你可以这样做：

function alertHello() {
  alert("hello");
}

for (var i = 0; i < gridItems.length; i++) {
    gridItems[i].onclick = alertHello;
}

Answer 2

var c = document.getElementsByClassName("divs");    <--- array of divs

for (var i = 0; i < c.length; i++) {

    c[i].onclick = function() {

        console.log(this.value);

    }

}

Answer 3

你需要循环遍历gridItems集合中的所有项目。在循环内部，使用迭代器i值获取每个项目。

function handleClick()
{
  alert("hello");
}
function numberTrack() {

  var gridItems = document.getElementsByClassName("grid");

  for (var i = 0; i < gridItems.length; i ++) {
      gridItems[i].onclick = handleClick;
  }
}

numberTrack();

如果允许使用jQuery，则可以将事件绑定到这样的项目。

$(function(){
  $(document).on("click",".grid",function(e){
      var item =$(this);
      alert(item.html())
  })
})

Here是一个有效的jsBin示例

将onclick事件添加到数组项

3 个答案: