Question

我已经看过这样的一些问题，但老实说，我是JS的超级菜鸟，并且不知道我在做什么：S所以我想我会把我所拥有的编码放进去看看是否有人可以帮忙。

基本上我所拥有的是显示然后隐藏带有ID名称的div的JS，但我希望它代替类名，因为我有多个类，我想通过单击按钮来显示或隐藏它们。我正在为我的朋友制作一个带分拣系统的页面。它是Tumblr上的RP *字符的Masterlist，我希望它可以显示JUST MtF trans字符并隐藏所有其他类别的字符或隐藏JUST 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>

Answer 1

希望这有帮助，

＆＃13;

$(".filter-btn").click(function() {
  var className = $(this).attr('data-target');
  if ($("div").not("." + className).is(":visible")) {
    $("." + className).show();
    $("div").not("." + className).hide();
  } else {
    $("." + className).hide();
    $("div").not("." + className).show();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mtf">MTF</div>
<div class="mtf">MTF</div>
<div class="mtf">MTF</div>
<div class="mtf">MTF</div>

<div class="ftm">FTM</div>
<div class="ftm">FTM</div>
<div class="ftm">FTM</div>
<div class="ftm">FTM</div>

<div class="nonbinary">Non Binary</div>
<div class="nonbinary">Non Binary</div>
<div class="nonbinary">Non Binary</div>
<div class="nonbinary">Non Binary</div>
<div class="nonbinary">Non Binary</div>
<div class="fluidqueer">Fluid Queer</div>
<div class="fluidqueer">Fluid Queer</div>
<div class="fluidqueer">Fluid Queer</div>
<div class="fluidqueer">Fluid Queer</div>
<div class="fluidqueer">Fluid Queer</div>

<input class="filter-btn" type="button" value="MTF" data-target="mtf">
<input class="filter-btn" type="button" value="FTM" data-target="ftm">
<input class="filter-btn" type="button" value="Non Binary" data-target="nonbinary">
<input class="filter-btn" type="button" value="Fluiq Queer" data-target="fluidqueer">

＆＃13;

在您的情况下，常用选择器可以是

var $ all = $（＆＃39; .andomboxes div＆＃39;）;

所以代码变成了

  $(".filter-btn").click(function() {
    var $all = $('.fandomboxes div'),
    className = $(this).attr('data-target');
    if ($all.not("." + className).is(":visible")) {
      $("." + className).show();
      $all.not("." + className).hide();
    } else {
      $("." + className).hide();
      $all.not("." + className).show();
    }
  });

Answer 2

getElementsByClassName()是查找类的函数。

但是，由于类的设计方式与ID相比（可以有多个元素与一个类而不是只有一个具有ID），它会返回一个元素数组而不是一个。

JavaScript style函数仅适用于单个元素，因此您需要迭代它们：

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

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

隐藏/显示功能的Javascript类而不是ID

2 个答案: