如何使用JavaScript隐藏多个元素

Question

Yes, the question has been asked so many times, but this one is a bit more specific. I need JavaScript code that shows/hides all elements of a certain class . The code must be compatible with the older browsers and Internet Explorer, and it must have an extremely small footprint. So, please don't post jQuery solutions, since this task will use 0.01% of the code from the library. So far I've come up with this:

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

Since getElementsByclassName does not work in IE, and most common solutions are too bulky for me. Is this code optimal for the task, or could it be streamlined even more? (as a reference, the previous solution used a cgi to add <style>.myclass {visibility:visible}</class> to the page)

Answer 1

Don't use the same iterator (var i) in an inner for loop because it collides with your current loop. Remove the second inner one and check if class x is set, then set your property, do a "continue" and vice versa:

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

Here's a mockup of a classname-switcher, would that be an idea? If you use IE < 8, use document.getElementsByTagName instead of 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

You need to use a shim or iterate through the dom and get elements with your class. See no other solutions.

Answer 4

I agree with Luba, here's a shim: getElementsByClassName.polyfill.js

As commented by Hemang, link only answers are invalid due to link change so here's the code from the link. The link is a shim for the deficit of getElementsByClassName in pre-ie9. Initially the shim tests the lack of getElementsByClassName then tests for the presence of querySelectorAll, if this is not available (ie pre-ie8) then evaluate is used.

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