如何使用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';
    }
  }
}

Answer 2

这是一个类名切换器的模型，这是一个想法吗？如果使用 IE <8，请使用 document.getElementsByTagName 而不是 document.querySelectorAll 。

(function() {
  document.querySelector('button').addEventListener('click', toggledivshidden);
  
  function toggledivshidden() {
    return toggle('div', 'hidden');
  }
  function toggle(tag, clssname) {
    var flips = document.querySelectorAll(tag);
    for (var i = 0; i< flips.length; i+=1) {
      var classExists = RegExp(clssname, 'i').test(flips[i].className);
      classEdit(flips[i], clssname, classExists);
    }
  }
  
  // add or remove a classname, without destroying other classnames 
  function classEdit(el, clname, remove) {
    var re = RegExp(clname, 'g'),
        current = el.className;
    el.className = ( remove ? current.replace(re, '')
                            : re.test(current)
                             ? current
                             : current +' '+clname )
                   .replace(/s+/g, ' ')     // remove redundant spaces
                   .replace(/^s+|s+$/,''); // trim
    
    return true;
  }
}())

.hidden {
  visibility: collapse;
  height: 0;
}
div:after {
  content: ' - className: "'attr(class)'"';
  color: #c0c0c0;
}

<div class="hidden some">originally hidden</div>
<div class="some hidden foo bar">originally hidden</div>
<div class="some more etc">originally visible</div>
<div class="some">originally visible</div>
<button>toggle</button>

Answer 3

你需要使用填充程序或遍历 dom 并获取类的元素。没有其他解决方案。

Answer 4

我同意 Luba 的观点，这里有一个垫片：getElementsByClassName.polyfill.js

正如 Heman 所评论的那样，由于链接更改，仅链接答案无效，因此这是链接中的代码。该链接是 pre-ie9 中 getElementsByClassName 赤字的填充程序。最初，填充程序测试缺少getElementsByClassName，然后测试querySelectorAll是否存在，如果不可用（即pre-ie8），则使用evaluate。

// Add a getElementsByClassName function if the browser doesn't have one
// Limitation: only works with one class name
// Copyright: Eike Send http://eike.se/nd
// License: MIT License
if (!document.getElementsByClassName) {
  document.getElementsByClassName = function(search) {
    var d = document, elements, pattern, i, results = [];
    if (d.querySelectorAll) { // IE8
      return d.querySelectorAll("." + search);
    }
    if (d.evaluate) { // IE6, IE7
      pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]";
      elements = d.evaluate(pattern, d, null, 0, null);
      while ((i = elements.iterateNext())) {
        results.push(i);
      }
    } else {
      elements = d.getElementsByTagName("*");
      pattern = new RegExp("(^|\s)" + search + "(\s|$)");
      for (i = 0; i < elements.length; i++) {
        if ( pattern.test(elements[i].className) ) {
          results.push(elements[i]);
        }
      }
    }
    return results;
  }
}