同じクラス名のすべての要素を非表示にしますか？

Question

同じクラス名（float_form）の要素を非表示にしようとしていますが、以下のスクリプトを使って表示しています（float_formクラスのdivはすべて最初は非表示です）。私はたくさんのjqueryソリューションを見てきましたが、私はそれらのどれかをこのために働かせることはできません。

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

編集：それは明確ではなかった場合申し訳ありませんが、私はjQueryのを使用しない（と私は、これはjqueryのではないことを知っています）。私はjavascriptを使用してスタイルにない繰り返しクラス名を認識する方法を探しています= display：none; div IDをキーにしたループが存在するため、ID要素の表示/非表示を損なうことはありません。 divのhtmlは以下のようになります。{item.ID}はwhileループです。

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

Answer 1

バニラ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

試してみてください。

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

はデモ：showClass("float_form");

Answer 3

あなたはjQueryのに探しているなら、それはあなたが$のパラメータ内のクラスセレクタを使用することができることを知って良いことですメソッド.hide()を呼び出します。

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

しかし、それはあなたが探しているトグルだ場合、.toggle();

を使用しかし、ここでは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'); 

デモはこちら（ "クリックしてくださいレンダリング "）：http://jsbin.com/ofusad/2/edit#javascript,html