Question

是的，这个问题被问过很多次，但这个问题有点具体。我需要JavaScript代码来显示/隐藏某个class的所有元素。代码必须与旧版浏览器和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，然后设置您的属性，执行＆＃34;继续＆＃34;反之亦然：

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＆lt; 8，使用document.getElementsByTagName代替document.querySelectorAll。

＆＃13;

(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;
  }
}())

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

你需要使用垫片或迭代dom并获得你的类的元素。没有其他解决方案。

Answer 4

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

正如Hemang评论的那样，链接只有答案因链接更改而无效，所以这里是链接中的代码。该链接是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;
  }
}

如何使用javascript隐藏多个元素

4 个答案: