运行函数onclick。正在单击的所有按钮
运行函数onclick。正在单击的所有按钮
提问于 2014-10-29 08:14:13
我有很多带有class="clearSelect"的按钮。我想让这些按钮在点击时执行一个功能。我是javascript的新手，不太确定为什么会发生这种情况，但我认为我的函数正在执行，而不是只执行onclick
下面的代码调用了我的所有其他函数，导致每个按钮都被单击。
代码：
var buttons = document.getElementsByClassName("clearSelect"); // objects with class="clearSelect"
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
// button.addEventListener("onclick", clearOrSelectAll(button.id));
button.onclick = clearOrSelectAll(button.id);
}以下是要调用的函数：
function clearOrSelectAll(btn) {
var cleartab = clearButtonSet[btn];
var selecttab = selectButtonSet[btn];
// console.log("clicked!");
if (cleartab != null) {
getOSList(cleartab, false);
} else {
getOSList(selecttab, true);
}
}
function getOSList(tabVal, fate) {
var configTab = document.getElementById(tabVal);
var browserList = configTab.getElementsByClassName("browser_list");
// var idObjs = browserList.getElementsByTagName("li");
for (var h = 0; h < browserList.length; h++) {
var idObjs = browserList[h].getElementsByTagName("li");
// console.log(h);
// console.log(idObjs);
// select all
if (fate) {
for (var i = 0; i < idObjs.length; i++) {
if (configs[idObjs[i].id] == null) {
idObjs[i].className = "selected";
configs[idObjs[i].id] = config_dictionary[idObjs[i].id];
}
}
// clear all
} else {
for (var j = 0; j < idObjs.length; j++) {
if (configs[idObjs[j].id] == null) {
idObjs[j].className = "unselected";
delete configs[idObjs[j].id];
}
}
}
}
}回答 2
Stack Overflow用户
发布于 2014-10-29 09:08:41
@Christopher非常接近，但button.id应该是this.id。
button.onclick = function() {
clearOrSelectAll(this.id);
}button.id不能工作的原因可以用下面的代码来演示：
var buttons= document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
button.onclick = function() {
alert(button.id);
}
}<button id="B1">Button 1</button>
<button id="B2">Button 2</button>
<button id="B3">Button 3</button>
每个按钮都返回"B3“，因为这是变量button被赋给的最后一个对象。
Stack Overflow用户
发布于 2014-10-29 08:21:10
在for循环中，当您将事件附加到所有按钮时，将调用clearOrSelectAll函数。您可能希望将它包装在一个匿名函数中，以确保只有在触发事件时才会调用它。
// Non-ideal solution: see edit
button.onclick = function() {
clearOrSelectAll(button.id);
}编辑：已经指出，当通过onclick属性或addEventListener方法附加事件处理程序时，'this‘上下文变量将指向有问题的元素。因此，如果你引用它，而不是使用'button‘作为闭包，并指望javascript引擎不要过度优化你的循环(因为这会在调用事件时扰乱'button’的值)，那么它可能会更干净(也更容易阅读)。
button.onclick = function() {
clearOrSelectAll(this.id);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26620735
复制相关文章
相似问题
腾讯云开发者
