用于隐藏/显示函数的Javascript类而不是ID

我见过一些这样的问题，但老实说，我是JS的超级高手，不知道我在做什么：所以我想我应该把我的代码放在这里，看看是否有人能帮上忙

基本上，我拥有的是JS来显示然后隐藏一个ID名为的div，但我希望它用于类名，因为我有多个类，我想通过单击按钮来显示或隐藏它们。我正在为我的朋友制作一个带有排序系统的页面。这是用于Tumblr上RPD的Trans*字符的主列表，我希望它能够让您只显示MtF Trans字符并隐藏所有其他类别的字符，或者只隐藏MtF字符并显示所有其他类别的字符，例如（这是我想要的合法按钮之一）

这是我拥有的JS，有人知道如何编辑它使其适用于类吗？谢谢

<script>

    function myFunction1() {

      var x = document.getElementById('all');

    if (x.style.display === 'block') {
        x.style.display = 'none';
    } else {
        x.style.display = 'block';
    }
      document.getElementById("mtf").style.display = "block"; 
      document.getElementById("ftm").style.display = "block";
      document.getElementById("nonbinary").style.display = "block
      document.getElementById("fluidqueer").style.display = "block";

    }
    </script>
    <script>

    function myFunction2() {

      var x = document.getElementById('mtf');

    if (x.style.display === 'block') {
        x.style.display = 'none';
    } else {
        x.style.display = 'block';
    }
      document.getElementById("ftm").style.display = "none";
      document.getElementById("nonbinary").style.display = "none";
      document.getElementById("fluidqueer").style.display = "none";

    }
    </script>
    <script>

    function myFunction3() {

      var x = document.getElementById('ftm');

    if (x.style.display === 'block') {
        x.style.display = 'none';
    } else {
        x.style.display = 'block';
    }
      document.getElementById("mtf").style.display = "none"; 
      document.getElementById("nonbinary").style.display = "none";
      document.getElementById("fluidqueer").style.display = "none";

    }
    </script>
    <script>

    function myFunction4() {

      var x = document.getElementById('nonbinary');

    if (x.style.display === 'block') {
        x.style.display = 'none';
    } else {
        x.style.display = 'block';
    }
      document.getElementById("mtf").style.display = "none"; 
      document.getElementById("ftm").style.display = "none";
      document.getElementById("fluidqueer").style.display = "none";

    }
    </script>
    <script>

    function myFunction5() {

      var x = document.getElementById('fluidqueer');

    if (x.style.display === 'block') {
        x.style.display = 'none';
    } else {
        x.style.display = 'block';
    }
      document.getElementById("mtf").style.display = "none"; 
      document.getElementById("ftm").style.display = "none";
      document.getElementById("nonbinary").style.display = "none";
      document.getElementById("fluidqueer").style.display = "none";

    }
    </script>

函数myFunction1（）{
var x=document.getElementById（'all'）；
如果（x.style.display==='block'）{
x、 style.display='none'；
}否则{
x、 style.display='block'；
}
document.getElementById（“mtf”）.style.display=“block”；
document.getElementById（“ftm”）.style.display=“block”；
document.getElementById（“非二进制”）.style.display=“块
document.getElementById（“fluidqueer”）.style.display=“block”；
}
函数myFunction2（）{
var x=document.getElementById（'mtf'）；
如果（x.style.display==='block'）{
x、 style.display='none'；
}否则{
x、 style.display='block'；
}
document.getElementById（“ftm”）.style.display=“无”；
document.getElementById（“非二进制”）.style.display=“无”；
document.getElementById（“fluidqueer”）.style.display=“无”；
}
函数myFunction3（）{
var x=document.getElementById（'ftm'）；
如果（x.style.display==='block'）{
x、 style.display='none'；
}否则{
x、 style.display='block'；
}
document.getElementById（“mtf”）.style.display=“无”；
document.getElementById（“非二进制”）.style.display=“无”；
document.getElementById（“fluidqueer”）.style.display=“无”；
}
函数myFunction4（）{
var x=document.getElementById（'nonbinary'）；
如果（x.style.display==='block'）{
x、 style.display='none'；
}否则{
x、 style.display='block'；
}
document.getElementById（“mtf”）.style.display=“无”；
document.getElementById（“ftm”）.style.display=“无”；
document.getElementById（“fluidqueer”）.style.display=“无”；
}
函数myFunction5（）{
var x=document.getElementById（'fluidqueer'）；
如果（x.style.display==='block'）{
x、 style.display='none'；
}否则{
x、 style.display='block'；
}
document.getElementById（“mtf”）.style.display=“无”；
document.getElementById（“ftm”）.style.display=“无”；
document.getElementById（“非二进制”）.style.display=“无”；
document.getElementById（“fluidqueer”）.style.display=“无”；
}

GetElementsByCassName（）

是查找类的函数

但是，由于类与ID的工作方式不同（一个类可以有多个元素，而只有一个元素具有ID），因此它返回一个元素数组，而不是一个元素数组

JavaScript的

样式

函数只对单个元素起作用，因此您需要对它们进行迭代：

var elements = getElementsByClassName('<your class>');

elements.forEach(function(element) {
    element.style.<your style> = <your property>
});

var elements=getElementsByClassName（“”）；
elements.forEach（函数（元素）{
元素。样式
});

希望这有帮助

$（“.filter btn”）。单击（函数（）{
var className=$（this.attr（'data-target'）；
if（$（“div”）.not（“.”+className.）.is（“：visible”））{
$（“+className）.show（）；
$（“div”）.not（“.”+className）.hide（）；
}否则{
$（“+className）.hide（）；
$（“div”）.not（“.”+className）.show（）；
}
})；

MTF
MTF
MTF
MTF
FTM
FTM
FTM
FTM
非二进制
非二进制
非二进制
非二进制
非二进制
流体奇才
流体奇才
流体奇才
流体奇才
流体奇才

我一遍又一遍地查看代码，仍然不知道您希望用它做什么。好吧，基本上我要查找的是，当您（例如）单击MtF按钮时，我希望所有类名为.MtF的div都是唯一显示的div，其他每个div（.ftm、.nonbinary、.fluidqueer）都显示隐藏。如果你再次单击同一个按钮，我只想隐藏.mtf div，并显示其他div。我想jQuery是允许的。对吗？。这就是我的目标！：P我在页面上多次显示这些类，并想一次单击就隐藏/显示它们。我现在就尝试一下，谢谢！所以我用GetElementsByCassName“但是当我点击任何一个按钮时，什么都没有发生：如果我发布整个页面的编码，会有什么不同吗？这是唯一的JS，按钮看起来像这样”MtF“现在它返回一个数组。我认为JavaScript的

风格

函数可能具有处理单个元素或元素数组的智能，但它只能处理单个元素。你必须迭代它们-我将更新答案。感谢JackHasaKeyboard的帮助！我会等着看你更新的答案。没问题：]这样就可以了，但是为了你的代码的价值，最好还是重新做一遍（你的代码可以归结为一个更直观的函数）。你想让我重做一遍并向你证明它是正确的吗？这正是我想要的但是，在每个不同类型的div中，是否可以使用按钮来单击而不是文本？我问，因为每个div中的文本都是Tumblr上各种RP博客的链接。另外，我假设我会将mtf按钮的“div”替换为“mtf”等等？对不起，完全没有！哈哈：谢谢你！我现在就把它放进去测试一下！：它在工作！！虽然不是完全的：（什么时候