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

您需要使用 shim 或遍历 dom 并使用您的类获取元素。没有其他解决方案。

Answer 4

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

正如 Hemang 所评论的，由于链接更改，仅链接的答案无效，因此这是链接中的代码。该链接是针对 pre-ie9 中 getElementsByClassName 不足的垫片。最初，shim 测试 getElementsByClassName 的缺失，然后测试 querySelectorAll 的存在，如果不可用（即 ie8 之前），则使用评估。

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