JavaScriptNewb：在收音机上按类显示div单击

好吧，显然我对javascript还不熟悉。我尝试使用单选按钮按类隐藏div，当单击单个单选按钮时，我的函数需要隐藏所有类名为“p12”或“p34”的div

但是

这只适用于所有p12分区。。。。我错过了什么来做这两件事

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

if（document.getElementById（'numbofextras0'）。checked==true）{
对于（i=0；i如果它不希望您可能超出
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
不是很有效。
考虑使用
querySelectorAll
而不是
getElementsByClassName

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

如果您愿意，这在较旧的浏览器中不起作用。但是如果您愿意，我宁愿推荐jQuery或类似的东西，而不是vanilla JS。
请尝试以下代码：

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

if（document.getElementById（'numbofextras0'）。checked==true）{
var elems=document.getElementsByClassName（'p12 p34'）
对于（i＝0；在一个非常描述性的标题中，考虑改变它。您是否尝试过查看JavaScript调试器或者简单地检查是否出现了任何错误？而且，看起来这个问题受到的影响比您展示给我们的要多，所以您最好给我们一个工作最少的示例。工作得很好！我不能感谢您足够的IANPGALL！我将ACC。只要它允许，就立即执行ept。@Jasper别担心，它会修复它。当您循环一个超过其长度的元素数组并尝试访问该元素时，它将不起作用，因为它将是未定义的。问题是硬编码100，并始终循环到它（当页面上可能只有5个类元素时）。您可以将多个ID传递给document.getElementsByClassName（）功能缩短您的代码长度，请检查我的answer@AlagesanPalani抱歉，这不是将多个类传递给函数的意思。请检查我对您答案的评论。@ianpgall即使是您的代码也会这样做吗？您在第一节中隐藏了类id为“p12”的所有元素，在第二节中隐藏了类id为“p34”的所有元素。您是否正在执行有什么不同吗？我是否遗漏了什么？这是不正确的。使用
'p12p34'
意味着匹配所有具有类“p12”和“p34”的元素，这似乎不是OP想要的。如果每种类型上都需要执行特定的操作，您可能希望将调用分开…但在这种情况下，两组元素对它们都有相同的操作-隐藏它们。@ianpgall即使您的代码也有相同的操作对吗？您在第一节中隐藏了类id为“p12”的所有元素n、 和第二部分中的“p34”。您有什么不同吗？我是否遗漏了什么？以下是QuerySelect的浏览器支持信息所有：
if (document.getElementById('numbofextras0').checked == true) {
          var elems=document.getElementsByClassName('p12 p34')
          for(i=0; i<elems.length; i++) 
             elems[i].style.display='none';
        }