【发布时间】：2017-12-16 04:16:24
【问题描述】：
因此，在其他人的帮助下，我有一段代码可用于我制作的与类一起使用的页面的过滤/排序系统。我在另一个/新页面上再次使用它，它有点小故障......
例如，我在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>【问题讨论】：
标签： javascript html css filtering