0

好的，显然我是 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';
}
4

3 回答 3

2

如果它不喜欢你可能超出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 个元素，尝试访问该索引将返回 undefined 并在你尝试执行类似.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每个循环迭代并不是很有效。

于 2012-10-30T17:49:43.023 回答
1

考虑使用querySelectorAll而不是getElementsByClassName

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

如果您愿意，这在旧版浏览器中不起作用。但如果你这样做，我宁愿推荐 jQuery 或类似的东西，而不是 vanilla JS。

于 2012-10-30T17:55:55.147 回答
-1

请尝试此代码：

if (document.getElementById('numbofextras0').checked == true) {
          var elems=document.getElementsByClassName('p12 p34')
          for(i=0; i<elems.length; i++) 
             elems[i].style.display='none';
        }
于 2012-10-30T17:56:30.060 回答