Javascriptフィルター/ソートシステムglitchy

Question

ここにいる他の人の助けを借りて、私はクラスで動作するページのフィルタリング/ソートシステムのためにコーディングをしています。別の/新しいページやそのような不具合に再び使用しています...

たとえば、私はthis pageで使用しています。フィルタの1つをクリックすると、写真の下のテキストが次のようになります。私はまた、1つのボックスに対して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

問題は、すべてのdivタグを選択しているあなたのセレクタ$(".content div")であり、あなたのテキストは、ネストされたdiv要素の中にあります。

$all.not("." + className).hide();で要素を非表示にすると、テキストが非表示になります。

しかし、1 $（ "。+ className）.show（）;`を使用していることを示してください。このセレクタは、クラスが情報なので、テキストのdivタグを再び表示させません。

これを解決するにはいくつかの方法があります。 div31タグ.infoに.classNameを追加できます。 .info要素を<span>のような別のタグを使用するように変更することができます。クリック機能の最後に$('.content div .info').show();と呼ぶと、.info divタグのdisplay:none属性が削除されます。親要素は隠されているため、表示されません。

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