Ukrywanie wszystkich elementów o tej samej nazwie klasy?

Question

Próbuję ukryć elementy o tej samej nazwie klasy (float_form), ale próbuję też użyć poniższego skryptu, aby je wyświetlić (wszystkie divy klasy float_form są początkowo ukryte). Przyjrzałem się wielu rozwiązaniom jquery, ale nie mogę sprawić, żeby któryś z nich pracował nad tym.

function show(a) { 
    var e = document.getElementById(a); 
    if (!e) 
     return true; 

    if (e.style.display == "none") { 
     e.style.display = "block" 
    } else { 
     e.style.display = "none" 
    } 
    return true; 
} 
​ 

Edit: Przepraszam, jeśli nie było jasne, nie mam zamiaru używać jQuery (i wiem, że to nie jest jQuery). Szukam sposobu używania javascript do rozpoznawania powtarzających się nazw klas, które nie są w stylu = display: none; bez narażania elementu show/hide ID, ponieważ istnieje klucz z identyfikatorem div. Html dla div wygląda jak poniżej, a {item.ID} to pętla while.

<div class="float_form" id="{item.ID}" style="display: none;"> 

Answer 1

vanilla javascript

function toggle(className, displayState){ 
    var elements = document.getElementsByClassName(className) 

    for (var i = 0; i < elements.length; i++){ 
     elements[i].style.display = displayState; 
    } 
} 

toggle('float_form', 'block'); // Shows 
toggle('float_form', 'none'); // hides 

jQuery:

$('.float_form').show(); // Shows 
$('.float_form').hide(); // hides 

Answer 2

Spróbuj:

function showClass(a){ 
var e = []; 
var e = getElementsByClassName(a); 
for(i in e){ 
    if(!e[i])return true; 

    if(e[i].style.display=="none"){ 
     e[i].style.display="block" 
    } else { 
     e[i].style.display="none" 
    } 
} 
return true; 
} 

demo: showClass("float_form");

Answer 3

Jeśli szukasz do jQuery, to dobrze wiedzieć, że można użyć selektora klasy wewnątrz parametrów $ i wywołaj metodę .hide().

$('.myClass').hide(); // all elements with the class myClass will hide. 

Ale jeśli jest to przełącznik szukasz, użyj .toggle();

Ale tutaj jest moje zdanie na dobrym przełącznik bez jQuery:

function toggle(selector) { 
    var nodes = document.querySelectorAll(selector), 
     node, 
     styleProperty = function(a, b) { 
     return window.getComputedStyle ? window.getComputedStyle(a).getPropertyValue(b) : a.currentStyle[b]; 
     }; 

    [].forEach.call(nodes, function(a, b) { 
    node = a; 

    node.style.display = styleProperty(node, 'display') === 'block' ? 'none' : 'block'; 
    }); 

} 

toggle('.myClass'); 

Demo tutaj (kliknij " Renderuj ", aby uruchomić): http://jsbin.com/ofusad/2/edit#javascript,html