[英]Adding the same event listener to multiple elements
我看到了类似的问题,但要么它们与我想要的不够接近,要么就像它们各自的答案一样不清楚 - 让我们看看:
我拥有:以下代码块。
addEventListener("load", function() {
for(var x in document.getElementsByName("rbTipo")) {
document.getElementsByName("rbTipo")[x].addEventListener("change", function() {
if(document.getElementById("rbTipoA").checked) {
document.getElementById("painelAluno").style.display = "block";
document.getElementById("painelEscola").style.display = "none";
}
else if(document.getElementById("rbTipoE").checked) {
document.getElementById("painelAluno").style.display = "none";
document.getElementById("painelEscola").style.display = "block";
}
else {
document.getElementById("painelAluno").style.display = "none";
document.getElementById("painelEscola").style.display = "none";
}
});
}
});
该怎么做:
name="rbTipo"
每个DOM元素,添加change
侦听器; 它做错了什么:
显然doc[...]byName("rbTipo")[x]
不是自己选择元素。 意味着x
不是从getElementsByName
返回的数组的当前迭代索引???
我尝试了什么:
给每个name="rbTipo"
元素自己的监听器。 由于我们正在谈论为多个元素做某事,因此似乎不合逻辑。 没有什么大不了,因为我只有两个,但我会经常这样做,并不总是只有“两个”索引。
找到name="rbTipo"
所有元素,并循环遍历它们,将监听器添加到每个元素:
var rbTipos = document.querySelectorAll('[name="rbTipo"]');
for (var i = 0; i < rbTipos.length; i++) {
rbTipos[i].addEventListener('change', myEventFunction);
}
for(var x in document.getElementsByName("rbTipo"))
我不会指望NodeList
s / HTMLCollection
的可枚举性。 更好地使用数组样式迭代 。
此外,您不应重复查询,而是将集合存储在变量中。 顺便说一句,你就已经给每一个元素它自己的听众,这是一个有点不必要。
addEventListener("load", function() {
var rbTipos = document.getElementsByName("rbTipo"),
rbTipoA = document.getElementById("rbTipoA"),
rbTipoE = document.getElementById("rbTipoE"),
painelA = document.getElementById("painelAluno"),
painelE = document.getElementById("painelEscola");
function listener() {
if(rbTipoA.checked) {
painelA.style.display = "block";
painelE.style.display = "none";
} else if(rbTipoE.checked) {
painelA.style.display = "none";
painelE.style.display = "block";
} else {
painelA.style.display = "none";
painelE.style.display = "none";
}
}
for(var i=0; i<rbTipos.length; i++) {
rbTipos[i].addEventListener("change", listener);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.