Tüm öğeleri aynı sınıf adına mı gizlemek?

Question

Aynı sınıf adına (float_form) sahip öğeleri gizlemeye çalışıyorum, ancak aynı zamanda bunları göstermek için aşağıdaki betiği kullanmaya çalışıyorum (float_form sınıflarının tümü başlangıçta gizlenmiştir). Çok fazla jquery çözümüne baktım ama bunların hiçbiri için işe yaramıyor gibi görünmüyor.

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

Düzenleme: belli değildi, ben jQuery kullanmak niyetinde değilim (ve bu jquery olmadığını biliyorum) üzgünüm. Tarzda olmayan tekrarlanan sınıf isimlerini tanımak için javascript kullanmanın bir yolunu arıyorum = display: none; show/hide ID elemanından ödün vermeden anahtar olarak div kimliğine sahip bir döngü vardır. Div için html, {item.ID} bir while döngüsü olmasıyla aşağıdakine benzer.

<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

Dene:

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: Eğer jQuery içine arıyorsanız showClass("float_form");

Answer 3

, o zaman $ parametreleri içinde bir sınıf seçici kullanabileceğinizi bilmekte fayda ve .hide() yöntemini çağırın.

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

Ama aradığınız bir geçiş olmazsa, .toggle();

kullanmak Ama burada jQuery kullanarak olmadan iyi bir geçiş almak benim:

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 burada ("Click "Çalıştırmak için" Render: http://jsbin.com/ofusad/2/edit#javascript,html