如何使用 javascript 隐藏多个元素

Question

是的，这个问题已经被问过很多次了，但是这个问题更具体一些。我需要 JavaScript 代码，即 shows/hides 某个 class 的所有元素。代码必须与较旧的浏览器和 Internet Explorer 兼容，并且占用空间必须极小。所以，请不要 post 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

您需要使用垫片或遍历 dom 并使用 class 获取元素。看不到其他解决方案。

Answer 2

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

正如 Hemang 评论的那样，由于 link 更改，link 只有答案无效，所以这里是 link 中的代码。 link 是 ie9 之前的 getElementsByClassName 缺陷的垫片。最初，垫片测试是否缺少 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;
  }
}

Answer 3

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

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 4

这是一个类名切换器的模型，可以吗？如果您使用 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>

如何使用 javascript 隐藏多个元素

How to hide multiple elements using javascript

html

javascript

css

internet-explorer

styles