Как скрыть несколько элементов с помощью javascript

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

Вам нужно использовать прокладку или прорези через дом и получить элементы с вашим классом. См. Другие решения.

Answer 2

Я согласен с Люба, вот прокладкой: getElementsByClassName.polyfill.js

Как прокомментировал Hemang, ссылается только ответы неверны из-за изменения ссылок, так вот код из ссылки. Ссылка - это прокладка для дефицита getElementsByClassName в pre-ie9. Первоначально прокладка проверяет отсутствие getElementsByClassName, затем проверяет наличие querySelectorAll, если это не доступно (т. Е. Pre-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

Не используйте тот же итератор (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 4

Вот макет из Classname-переключателе, это будет идея? Если вы используете 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>