Javascript过滤/排序系统故障

Question

所以在这里的其他人的帮助下，我有一段编码可以用于过滤/排序系统，用于我制作的适用于类的页面。我在另一个/新页面上再次使用它，它有点毛病......

例如，我在this page上使用它，当您点击其中一个过滤器时，图片下方的文字消失了....我还希望能够有2个过滤器一个盒子，但不起作用。例如，具有“custom”和“all”类的div。

这是我正在使用的JS：

$(".filter-btn").click(function() {
  var $all = $(".content 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();
  }
});

.content {
  position: fixed;
  top: 35%;
  left: 12.5%;
  width: 75%;
  text-align: center;
  height: 60%;
  border-radius: 50px;
  background-color: rgba(255, 255, 255, 0.2);
  border-top: 1px rgb(38, 6, 71) dashed;
  border-bottom: 1px rgb(38, 6, 71) dashed;
  background-image: URl(http://www.pngall.com/wp-content/uploads/2016/03/Stars-PNG-Clipart.png);
  background-size: cover;
  background-repeat: no-repeat;
  overflow: scroll;
  overflow-x: hidden;
  z-index: 9999999999;
  font-family: 'Capriola', sans-serif;
}

.all,
.custom,
.makeover {
  display: inline-block;
  position: relative;
  margin: 10px;
  width: 275px;
  height: 475px;
  background-color: rgba(38, 6, 71, 0.5);
  border: 1px rgb(38, 6, 71) dashed;
  font-size: 25px;
  border-radius: 20px;
  overflow: hidden
}

.all h1,
.custom h1,
.makeover h1 {
  position: relative;
  display: block;
  margin-top: 10px;
  color: #36B0BF;
  font-size: 45px;
  line-height: 90%;
}

.info {
  position: relative;
  top: -20px;
  width: 100%;
  height: 175px;
  font-size: 20px;
  color: white;
  -webkit-text-stroke: 1px rgba(255, 239, 74, 0.3);
  overflow: scroll;
  overflow-x: hidden;
}

.info a:link,
.info a:visited,
.info a:active {
  color: #EA1B83;
  text-decoration: underline;
}

.info a:hover {
  color: rgba(255, 239, 74, 0.6);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #36B0BF;
  border-radius: 20px;
}

::-webkit-scrollbar-thumb {
  background: #DC638E;
  border-radius: 10px;
}

.filter-btn {
  color: inherit;
  border: none;
  padding: 2px;
  font: inherit;
  cursor: pointer;
  background: transparent;
  color: rgba(255, 239, 74, 0.6);
  text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
  <input class="filter-btn" type="button" value="\ Custom/Requested Themes \" data-target="custom">
  <input class="filter-btn" type="button" value="\ Theme Makeovers \" data-target="makeover"></div>

<div class="content">

  <div class="all">
    <h1>Pokemon Theme</h1>
    <p><img alt="pokemon_inspired_theme;" style="position:relative; opacity: 1.0; width:250px;" src="http://orig02.deviantart.net/38f6/f/2017/143/4/9/pokemoninspiredtheme_by_timelessadventures-dba8kas.gif"></p>

    <div class="info">
      <p>| Pokemon Inspired Theme |
        </br>| Includes room for 7 links, description, title and subtitle |
        </br>| Description can be as long or short as you'd like |
        </br>| Designed to make it look like the posts are showing up on the pokedex |
        </br>| Great for the Pokemon RP community/Pokemon Lovers! |
        </br>(But of course anyone can use this for anything)
        </br>| Easy-Medium difficulty to customize
        </br>(depends on how much you want to edit) |
        </br>| Detailed Instructions
        </br>Inside Coding |
        </br>| <a href="https://pokemonthemetestblog.tumblr.com/">Preview</a> |
        </br>| <a href="https://pastebin.com/R2SdHEyT">Coding</a> |
      </p>
    </div>
  </div>
  <div class="custom">
    <h1>Purple and Green Velvet</h1>
    <p><img alt="purple_and_green_velvet_theme;" style="position:relative; opacity: 1.0; width:250px;" src="http://orig08.deviantart.net/6d0e/f/2017/146/e/9/purpleandgreenvelvettheme_by_timelessadventures-dbakque.gif"></p>
    <div class="info">
      <p>| Purple and Green Theme |
        </br>| Originally Requested by <a href="https://dontbemodest.tumblr.com/">dontbemodest</a> |
        </br>| Includes 7 links with built in Ask and Navigatin boxes</br>Big picture of your muse</br>And 2 gifs of your choosing! |
        </br>| Navigation box has 5 links </br>(but more can be added) |
        </br>| Description is hidden until clicked on |
        </br>| Easy to customize |
        </br>| Detailed Instructions
        </br>Inside Coding |
        </br>| <a href="https://writteninvelvetthemetestblog.tumblr.com/">Preview</a> |
        </br>| <a href="https://pastebin.com/2HVEbexC">Coding</a> |
      </p>
    </div>
  </div>
  <div class="custom">
    <h1>Charlie in Red and Black Theme</h1>
    <p><img alt="charlie_in_red_and_black_theme;" style="position:relative; opacity: 1.0; width:250px;" src="http://orig08.deviantart.net/cb56/f/2017/188/6/0/charlieinredandblack_by_timelessadventures-dbfhr8c.gif"></p>

    <div class="info">
      <p>| Charlie in Red and Black Theme |
        </br>| Originally requested by <a href="~">dockrieg</a> |
        </br>| Inspired by Charlie from Don't Starve |
        </br>| Includes room for 10 links, description, title and 2 pictures |
        </br>| Description can be as long or short as you'd like |
        </br>| Easy-Medium difficulty to customize
        </br>(as some colours are rgb) |
        </br>| Detailed Instructions
        </br>Inside Coding |
        </br>| <a href="https://charlieinredandblacktheme.tumblr.com/">Preview</a> |
        </br>| <a href="https://pastebin.com/tAhMQ6mQ">Coding</a> |
      </p>
    </div>
  </div>
  <div class="makeover">
    <h1></h1>
    <p><img alt="coming_soon;" style="position:relative; opacity: 1.0; width:250px;" src="http://orig12.deviantart.net/78c4/f/2017/111/d/a/more_coming_soon__by_timelessadventures-db6oedg.jpg"></p>
    <div class="info">
      <p>| |
        </br>| |
      </p>
    </div>
  </div>
</div>

Answer 1

问题是您的选择器$(".content div")正在选择所有div标签，而您的文本位于嵌套div中。

当您使用$all.not("." + className).hide();隐藏元素时，文本会被隐藏。

但是告诉他们你使用1 $（“。”+ className）.show（）;`。此选择器不会再显示文本div标签，因为它们的类是信息。

有几种方法可以解决这个问题。您可以将.className添加到.info div标记中。您可以更改.info元素以使用其他标记，例如<span>。在点击功能结束时，您可以拨打$('.content div .info').show();，这会从display:none div标记中删除.info属性。由于隐藏了父元素，因此它们将不可见。

$(".filter-btn").click(function() {
  var $all = $(".content 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();
  }
  $('.content div .info').show();
});

.content {
  position: fixed;
  top: 35%;
  left: 12.5%;
  width: 75%;
  text-align: center;
  height: 60%;
  border-radius: 50px;
  background-color: rgba(255, 255, 255, 0.2);
  border-top: 1px rgb(38, 6, 71) dashed;
  border-bottom: 1px rgb(38, 6, 71) dashed;
  background-image: URl(http://www.pngall.com/wp-content/uploads/2016/03/Stars-PNG-Clipart.png);
  background-size: cover;
  background-repeat: no-repeat;
  overflow: scroll;
  overflow-x: hidden;
  z-index: 9999999999;
  font-family: 'Capriola', sans-serif;
}

.all,
.custom,
.makeover {
  display: inline-block;
  position: relative;
  margin: 10px;
  width: 275px;
  height: 475px;
  background-color: rgba(38, 6, 71, 0.5);
  border: 1px rgb(38, 6, 71) dashed;
  font-size: 25px;
  border-radius: 20px;
  overflow: hidden
}

.all h1,
.custom h1,
.makeover h1 {
  position: relative;
  display: block;
  margin-top: 10px;
  color: #36B0BF;
  font-size: 45px;
  line-height: 90%;
}

.info {
  position: relative;
  top: -20px;
  width: 100%;
  height: 175px;
  font-size: 20px;
  color: white;
  -webkit-text-stroke: 1px rgba(255, 239, 74, 0.3);
  overflow: scroll;
  overflow-x: hidden;
}

.info a:link,
.info a:visited,
.info a:active {
  color: #EA1B83;
  text-decoration: underline;
}

.info a:hover {
  color: rgba(255, 239, 74, 0.6);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #36B0BF;
  border-radius: 20px;
}

::-webkit-scrollbar-thumb {
  background: #DC638E;
  border-radius: 10px;
}

.filter-btn {
  color: inherit;
  border: none;
  padding: 2px;
  font: inherit;
  cursor: pointer;
  background: transparent;
  /*color: rgba(255, 239, 74, 0.6);*/ / commented so you can see the links
  text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
  <input class="filter-btn" type="button" value="\ Custom/Requested Themes \" data-target="custom">
  <input class="filter-btn" type="button" value="\ Theme Makeovers \" data-target="makeover"></div>

<div class="content">

  <div class="all">
    <h1>Pokemon Theme</h1>
    <p><img alt="pokemon_inspired_theme;" style="position:relative; opacity: 1.0; width:250px;" src="http://orig02.deviantart.net/38f6/f/2017/143/4/9/pokemoninspiredtheme_by_timelessadventures-dba8kas.gif"></p>

    <div class="info">
      <p>| Pokemon Inspired Theme |
        </br>| Includes room for 7 links, description, title and subtitle |
        </br>| Description can be as long or short as you'd like |
        </br>| Designed to make it look like the posts are showing up on the pokedex |
        </br>| Great for the Pokemon RP community/Pokemon Lovers! |
        </br>(But of course anyone can use this for anything)
        </br>| Easy-Medium difficulty to customize
        </br>(depends on how much you want to edit) |
        </br>| Detailed Instructions
        </br>Inside Coding |
        </br>| <a href="https://pokemonthemetestblog.tumblr.com/">Preview</a> |
        </br>| <a href="https://pastebin.com/R2SdHEyT">Coding</a> |
      </p>
    </div>
  </div>
  <div class="custom">
    <h1>Purple and Green Velvet</h1>
    <p><img alt="purple_and_green_velvet_theme;" style="position:relative; opacity: 1.0; width:250px;" src="http://orig08.deviantart.net/6d0e/f/2017/146/e/9/purpleandgreenvelvettheme_by_timelessadventures-dbakque.gif"></p>
    <div class="info">
      <p>| Purple and Green Theme |
        </br>| Originally Requested by <a href="https://dontbemodest.tumblr.com/">dontbemodest</a> |
        </br>| Includes 7 links with built in Ask and Navigatin boxes</br>Big picture of your muse</br>And 2 gifs of your choosing! |
        </br>| Navigation box has 5 links </br>(but more can be added) |
        </br>| Description is hidden until clicked on |
        </br>| Easy to customize |
        </br>| Detailed Instructions
        </br>Inside Coding |
        </br>| <a href="https://writteninvelvetthemetestblog.tumblr.com/">Preview</a> |
        </br>| <a href="https://pastebin.com/2HVEbexC">Coding</a> |
      </p>
    </div>
  </div>
  <div class="custom">
    <h1>Charlie in Red and Black Theme</h1>
    <p><img alt="charlie_in_red_and_black_theme;" style="position:relative; opacity: 1.0; width:250px;" src="http://orig08.deviantart.net/cb56/f/2017/188/6/0/charlieinredandblack_by_timelessadventures-dbfhr8c.gif"></p>

    <div class="info">
      <p>| Charlie in Red and Black Theme |
        </br>| Originally requested by <a href="~">dockrieg</a> |
        </br>| Inspired by Charlie from Don't Starve |
        </br>| Includes room for 10 links, description, title and 2 pictures |
        </br>| Description can be as long or short as you'd like |
        </br>| Easy-Medium difficulty to customize
        </br>(as some colours are rgb) |
        </br>| Detailed Instructions
        </br>Inside Coding |
        </br>| <a href="https://charlieinredandblacktheme.tumblr.com/">Preview</a> |
        </br>| <a href="https://pastebin.com/tAhMQ6mQ">Coding</a> |
      </p>
    </div>
  </div>
  <div class="makeover">
    <h1></h1>
    <p><img alt="coming_soon;" style="position:relative; opacity: 1.0; width:250px;" src="http://orig12.deviantart.net/78c4/f/2017/111/d/a/more_coming_soon__by_timelessadventures-db6oedg.jpg"></p>
    <div class="info">
      <p>| |
        </br>| |
      </p>
    </div>
  </div>
</div>