Javascript 过滤/排序系统故障

标签 javascript html css filtering

因此，在其他人的帮助下，我编写了一段代码，用于我制作的与类一起使用的页面的过滤/排序系统。我在另一个/新页面上再次使用它，它有点小故障......

例如，我在 this page 上使用它当您单击其中一个过滤器时，图片下方的文字消失了……我还希望一个盒子可以有 2 个过滤器，但这行不通。例如，类为“自定义”和“全部”的 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>

最佳答案

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

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

但向他们展示您正在使用 1$("."+ className).show();`。此选择器不会再次显示文本 div 标签，因为它们的类是信息。

有几种方法可以解决这个问题。您可以添加 .className给你的.info div 标签。您可以更改 .info元素使用不同的标签，如 <span> .在点击功能结束时，您可以调用 $('.content div .info').show();这将删除 display:none来自 .info 的属性div 标签。由于它们的父元素是隐藏的，因此它们将不可见。

$(".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>

关于Javascript 过滤/排序系统故障，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45045760/

上一篇：javascript - 当某个元素为 "active"时如何设置文本颜色

下一篇：javascript - jquery 在 google chrome 浏览器上缓慢渲染微调器

相关文章：

html - 我怎么知道什么时候应该将 CSS 动画应用到包含元素还是直接应用到元素？

javascript - 黑莓浏览器 Javascript 时间 DST 问题

javascript - 将 "eval"定义为 Function 构造函数调用的形式参数。这不应该在严格模式代码中引发语法错误吗？

javascript - 将对象变量传递给事件监听器

html - 如何检测 ios phonegap 开发中的选择框高度？

css - CSS 变换缩放后 Safari 上的模糊 SVG

javascript - 单击 iframe 中的 url 时关闭 iframe

javascript - 如何在 HTML DOM 中存储自定义 javascript 对象？

jquery - 固定高度为 100% 的 Div

html - CSS3 : 2 buttons in new line using flex concept

©2024 IT工具网  联系我们