隐藏具有相同类名的所有元素？

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来识别不在style = display:none中的重复类名.在不影响show/hide ID元素的情况下,因为有一个以div 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

如果您正在研究jQuery，那么很高兴知道您可以在的参数内使用类选择器$并调用method .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