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）。我正在寻找一种使用 javascript 来识别不在 style= display:none; 中的重复类名的方法。不影响显示/隐藏 ID 元素，因为有一个以 div 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 回答
4

使用 jQuery

$(".float_form").each(function(){
    if($(this).css("display") == "none"){
        $(this).show();
    }else{
        $(this).hide();
    }
});
于 2020-01-29T10:12:31.550 回答
2

不需要 jQuery

const toggleNone = className => {
  let elements = document.getElementsByClassName(className)
  for (let i = 0; i < elements.length; i++){
    if (elements[i].style.display === "none") {
      elements[i].style.display = "";
    } else {
      elements[i].style.display = "none";
    }
  }
}

const toggleVisibility = className => {
  let elements = document.getElementsByClassName(className)
  for (let i = 0; i < elements.length; i++){
    let elements = document.getElementsByClassName(className);
    if (elements[i].style.visibility === "hidden") {
      elements[i].style.visibility = "";
    } else {
      elements[i].style.visibility = "hidden";
    }
  }
}

// run 
toggleNone('your-class-name-here'); // toggles remove
// or run 
toggleVisibility('your-class-name-here'); // toggles hide

以 ES6 语法提供的答案，但如果您愿意，可以轻松转换为 ES5

于 2020-05-13T18:33:42.180 回答
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 回答