JavaScript newb:单击无线电上的类别显示

Question

好吧，显然我是JavaScript的新手。我正在尝试使用单个单个收音机时，我尝试使用单个divs隐藏divs，我的功能需要使用" P12"或" P34"的所有Divs隐藏。

。

但是

这仅适用于所有p12divs。

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";
}

以这种方式，它循环遍历每个getElementsByClassName返回的确切元素（您没有硬码100 in）。

主要问题是，当您的硬码100 in时，它将始终从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并不是很有效。

Answer 2

考虑使用querySelectorAll代替getElementsByClassName

document.querySelectorAll(".p12, .p34")

如果您在乎，这将在较旧的浏览器中工作。但是，如果您这样做，我宁愿推荐JQuery或类似的香草JS。

Answer 3

请尝试此代码：

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