Question

我必须遵循以下代码：

resetAll()

我试图让这个函数脱离这个循环，但它似乎不起作用。有什么建议吗？

var box = document.getElementsByClassName('Box');

for(i=0; i<box.length; i++){
  box[i].onclick = function(){
    this.classList.toggle('active');
  };
}

http://codepen.io/AndrewRed/pen/OyBLzw?editors=001

Answer 1

使用对该功能的引用。

box[i].onclick = getBlue;

如果添加括号，则调用该函数并将box[i].onclick的值设置为getBlue的返回值，在这种情况下为undefined，因为它不返回任何内容。

Answer 2

你在这里调用函数：

getBlue

而是将box[i].onclick = getBlue;作为处理程序传递;

Answer 3

在大多数情况下，您可以使用其值替换变量。因此，让我们用函数定义替换<Portfolio contentItems={fetchedItems} />。这应该与第一个示例完全相同：

getBlue

哦，哦！没关系函数名称，但这看起来不像第一个例子！在函数之后有box[i].onclick = getBlue(); function getBlue(){ this.classList.toggle('active'); } // becomes box[i].onclick = function getBlue(){ this.classList.toggle('active'); }();，它不会出现在第一个例子中：

()

他们来自哪里？从box[i].onclick = function(){ this.classList.toggle('active'); }; // <- no () here开始。函数后getBlue()做什么？他们称这个功能。现在应该清楚的是，在第一个示例中，您实际上并未调用该函数，只需将该函数的引用分配给()。

现在知道了，我们知道正确的替换应该如何：

onclick

没有box[i].onclick = getBlue;。

Javascript - 获取循环功能

3 个答案: