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

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识别重复的类名，而不会影响show/hide ID元素，因为有一个循环，其中div id作为键。该div的HTML如下所示，其中{item.ID}是一个while循环。

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

- user1489970

---

你的代码没有使用jQuery。JavaScript不等同于jQuery！你展示的代码是通过id选择元素，而不是通过类名选择。如果要选择类名，请使用document.getElementsByClassName，并循环遍历返回列表中的所有项。 - Rob W

@RobW. 我们要加上jQuery标签吗？我回答了纯JS和jQuery两个方面。 - gdoron

即使您进行了编辑，仍然非常不清楚您正在询问/需要的是什么。 - gdoron

这真是令人恼火，有些人想让你为他们做工作，却连说出自己需要什么的时间都不肯花。听起来像是一个“求助吸血鬼”（http://slash7.com/2006/12/22/vampires/）。 - gdoron

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

- gdoron is supporting Monica

---

+1 但不幸的是，getElementsByClassName 只在最近版本的浏览器上工作。 - Ram

@undefined。如果他想，他可以使用jQuery，或者如果他喜欢的话，实现getElementsByClassName。他应该在提问方面投入更多的努力，我甚至不知道他是否真的在使用 jQuery。 - gdoron

@undefined。这真是令人烦恼，有些人想让你为他们做事，却连自己想要什么都不愿花时间说清楚。听起来像是一个“求助吸血鬼”（http://slash7.com/2006/12/22/vampires/）。 - gdoron

你说得对，这真的很令人沮丧，特别是当他们问一个问题，然后下周回来检查答案，而那些试图解决问题的人却在互相斗争。 - Ram

Answer 2

如果你在学习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' );

这里有个演示（点击“Render”运行）：http://jsbin.com/ofusad/2/edit#javascript,html

- David G

Answer 3

使用jQuery

$(".float_form").each(function(){
    if($(this).css("display") == "none"){
        $(this).show();
    }else{
        $(this).hide();
    }
});

- Bhaskara Arani

Answer 4

无需 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

- jasonleonhard

Answer 5

尝试：

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

- mgraph

---

因为ID元素正在用于数组循环，所以我需要保留getElementById。我尝试将其与隐藏的输入按钮分开使用，但也没有起作用。 - user1489970

@user1489970 这是一个新的函数 showClass()，只需保留您已经拥有的 show() 函数，并添加此函数。 - mgraph

我确实尝试过将其分开使用（并将var e解析为var f插入原始函数中）。只有原始函数起作用。 - user1489970