34

同じクラス名 (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 ではないことはわかっています)。style= display:none; にない繰り返しのクラス名を認識するために JavaScript を使用する方法を探しています。div id をキーとするループがあるため、show/hide ID 要素を損なうことはありません。div の html は次のようになります。{item.ID} は while ループです。

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

5 に答える 5

79

バニラ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
于 2012-06-28T23:52:11.577 に答える
14

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

于 2012-06-28T23:51:31.730 に答える
0

試す ：

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");

于 2012-06-28T23:51:12.713 に答える