使用Javascript - 获取函数退出循环

我要下面的代码：使用Javascript - 获取函数退出循环

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

来源

2015-11-06 Andrei Rosu

使用该函数的引用。

box[i].onclick = getBlue;

如果添加了括号，这调用功能，并将的box[i].onclick价值是getBlue返回值在这种情况下是undefined，因为它不返回任何东西。

来源

2015-11-06 16:15:38 AtheistP3ace

是不是最好的做法是定义影响函数的变量（即'var getBlue = function（）{};'这种用法？ – Aaron

除非你特别想避免[函数提升]（http://elegantcode.com/2011/03/24/basic-javascript-part-12-function-hoisting/），否则，没有理由使用匿名函数，因为它[伤害可调试性]（http： //www.javascriptkata.com/2010/05/19/how-to-de-anonymize-your-anonymous-functions/） –

我认为那是个人偏好，对我而言，它取决于函数的定义如果我需要用变量引用它，我会做出决定@DanPrince感谢编辑，假设我应该给出更多的细节。=] – AtheistP3ace

你在这里调用该函数：

box[i].onclick = getBlue();

，而不是通过getBlue的处理程序;

box[i].onclick = getBlue;

来源

2015-11-06 16:19:17 Ramanlfc

在大多数情况下，你可以通过它的值替换的变量。因此，我们用函数定义替换getBlue。这应该看起来与第一个例子完全一样：

box[i].onclick = getBlue(); 

function getBlue(){ 
    this.classList.toggle('active'); 
} 

// becomes 

box[i].onclick = function getBlue(){ 
    this.classList.toggle('active'); 
}();

哦，哦！ Nevermind函数名称，但这看起来不像第一个例子！有()的功能之后，它不会出现在第一个例子：

box[i].onclick = function(){ 
    this.classList.toggle('active'); 
}; // <- no() here

哪里来的呢？当然是getBlue()。一个函数做了什么()？他们称这个功能。现在应该清楚，在第一个示例中，您实际上并没有调用该函数，只需将该函数的引用分配给onclick即可。

知道，现在，我们知道正确的更换应该什么样子：

box[i].onclick = getBlue;

没有()。

来源

2015-11-06 16:52:45

使用Javascript - 获取函数退出循环

回答

相关问题