JavaScript 新手 : Show divs by class on radio click

Question

好吧，显然我是 JavaScript 新手。我正在尝试使用单选按钮按类隐藏 div，我的函数需要在单击单个单选按钮时隐藏类名为“p12”或“p34”的所有 div。

但是

这仅适用于所有 p12 div....我缺少什么来制作这两个？..

if (document.getElementById('numbofextras0').checked == true) {
    for(i=0; i<100; i++) 
        document.getElementsByClassName('p12')[i].style.display = 'none';

    for(i=0; i<100; i++) 
        document.getElementsByClassName('p34')[i].style.display = 'none';
}

Answer 1

如果它不喜欢你超出 getElementsByClassName 的范围，我不会感到惊讶。返回(但话又说回来，我还没有测试/检查会发生什么)。尝试先存储结果，然后循环它们。

var p12s = document.getElementsByClassName('p12');
for (var i = 0; i < p12s.length; i++) {
    p12s[i].style.display = "none";
}

var p34s = document.getElementsByClassName('p34');
for (var i = 0; i < p34s.length; i++) {
    p34s[i].style.display = "none";
}

这样，它就会循环遍历每个 100 的确切数量的元素(您没有硬编码 getElementsByClassName )。返回。

主要问题是当你硬编码 100 时在中，它总是从0到99循环。如果 getElementsByClassName返回少于 100 个元素，当您尝试执行类似 .style.display = "none"; 的操作时，尝试访问该索引将返回未定义并抛出异常。或者如果返回 160 个元素怎么办？仅前 100 条将被修改。在循环之前进行调用并将返回的元素存储在变量中，然后循环遍历该长度，是安全/正确的方法。就像您之前的方式一样，它正在调用 getElementsByClassName在每次循环迭代中 - 效率非常低 - 您只需需要执行一次!...当然，硬编码 100不是循环元素的最佳方式。这个想法是正确的，只是顺序不正确。我的意思是，从技术上讲，你可以这样做:

for (i=0; i<100; i++) {
    var el = document.getElementsByClassName('p12')[i];
    if (el) {
        el.style.display = 'none';
    }
}

但就像我说的，打电话 getElementsByClassName在每个循环迭代上效率不是很高。