javascript - 如何使用javascript隐藏多个元素

Question

是的，这个问题已经被问过很多次了，但是这个问题更具体一些。我需要显示/隐藏某个 class 的所有元素的 JavaScript 代码.代码必须与较旧的浏览器和 Internet Explorer 兼容，并且占用空间必须极小。所以，请不要发布 jQuery 解决方案，因为此任务将使用库中 0.01% 的代码。到目前为止，我已经想出了这个:

var flip = document.getElementsByTagName(_tag);
if (trigger)
  for (var i = 0; i < flip.length; i++)
    if (flip[i].className == _class) flip[i].style.visibility = 'visible';
    else
      for (var i = 0; i < flip.length; i++)
        if (flip[i].className == _class) flip[i].style.visibility = 'hidden';

自 getElementsByclassName在 IE 中不起作用，大多数常见的解决方案对我来说都太庞大了。这段代码是最适合任务的，还是可以进一步简化？ (作为引用，之前的解决方案使用 cgi 将 <style>.myclass {visibility:visible}</class> 添加到页面)

Answer 1

不要在内部 for 循环中使用相同的迭代器 (var i)，因为它会与当前循环发生冲突。删除第二个内部的并检查是否设置了类 x，然后设置你的属性，执行“继续”，反之亦然:

var flip = document.getElementsByTagName(_tag);
if (trigger) {
  for (var i = 0; i < flip.length; i++) {
    var state = flip[i].style.visibility;
    if (flip[i].className == _class && state == 'hidden') {
      flip[i].style.visibility = 'visible';
      continue;
    }

    if (flip[i].className == _class && state == 'visible') {
      flip[i].style.visibility = 'hidden';
    }
  }
}