Sortierung mehrerer div mit Klassen

Question

Also habe ich eine Liste von div, die mehrere Klassen an jedem haben (mon thurs s1 s2 Tanz singen Stimme ect.) Ich möchte ein Filtersystem einrichten, mit dem Benutzer eine Klasse auswählen und ausblenden können die Anderen. Es wäre toll, mehrere Klassen auszuwählen und anzuzeigen, was ausgewählt ist.

Mein HTML

<!-- Class Info --> 
<!-- Fliter Btn --> 
    <button class="clearBtn btn" id="clearBtn">Clear Filter</button> 
    <button class="filterBtn btn" id="filterBtn">Filter</button> 
    <!-- Fliter Btn --> 

    <!-- Fliter --> 
    <div class="container" id="filterBoxes"> 
    <div class="row " id="filterField"> 
     <div class="col-lg-2 col-md-2 col-sm-4 fliterBox"> 
      <button id="actBtn" class="actBtn btn">Acting Classes</button> 
</div> 


<div class="col-lg-2 col-md-2 col-sm-4 fliterBox"> 
<button id="danceBtn" class="danceBtn btn">Dance Classes</button> 
</div> 

<div class="col-lg-2 col-md-2 col-sm-4 fliterBox"> 
<button id="voiceBtn" class="voiceBtn btn">Voice Classes</button> 
</div> 

<div class="col-lg-2 col-md-2 col-sm-4 fliterBox"> 
<button id="tchBtn" class="tchBtn btn">Tech Classes</button> 
</div> 

<div class="col-lg-2 col-md-2 col-sm-4 fliterBox"> 
<button id="monBtn" class="monBtn btn">Monday Classes</button> 
</div> 

<div class="col-lg-2 col-md-2 col-sm-4 fliterBox"> 
<button id="thursBtn" class="thursBtn btn">Thursday Classes</button> 
</div> 

<div class="col-lg-2 col-md-2 col-sm-4 fliterBox"> 
<button id="s1Btn" class="s1Btn btn">Session 1 Classes</button> 
</div> 

<div class="col-lg-2 col-md-2 col-sm-4 fliterBox"> 
<button id="s2Btn" class="s2Btn btn">Session 2 Classes</button> 
</div> 

<div class="col-lg-2 col-md-2 col-sm-4 fliterBox"> 
<button id="g2-6Btn" class="g2-6Btn btn">Grade 2 - 6 Classes</button> 
</div> 

<div class="col-lg-2 col-md-2 col-sm-4 fliterBox"> 
<button id="g7-12Btn" class="g7-12Btn btn">Grade 7 - 12 Classes</button> 
</div> 

    </div> 
    </div> 
    <!-- Fliter --> 


    <!-- Acting --> 
    <div class="container"> 
    <h3 class="classTitle acting">Acting Classes</h3> 
    <!--Class--> 
    <div class="row classes"> <!--Class--> 
    <div class="col-md-3 col-sm-3 acting g2-6 thurs s1 class" id="clown"> 
     <h4 class="className">Clowning Skills</h4> 
     <p class="classInfo">Grades 2 – 6<br />Thursdays Session 1</p> 
     <!-- course Discription --> 
    <div class="panel-group" id="accordion2" role="tablist" aria- 
     multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data- 
     toggle="collapse" data-parent="#accordion1" 
     href="#collapseOne2">Course Discription </a></h4> 
     </div> 
     <div id="collapseOne2" class="panel-collapse collapse in 
      courseCollapse"> 
      <div class="panel-body"> 
      <p class="classDis">Are you always looking for ways to entertain 
     and amaze? Do you love to make people laugh? Add to your 
     hilarious skills each week as Ms Amy Arpan teaches you the tricks 
     of the trade, including juggling!</p> 
      </div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
    <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
    </div> 
    <!--Class--> 
    <div class="col-md-3 col-sm-3 acting g7-12 mon s2 class" id="improve1a"> 
    <h4 class="className">Improve 1A</h4> 
    <p class="classInfo">Grades 7 – 12<br />Mondays Session 2</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion3" role="tablist" aria- 
    multiselectable="true" > 
     <div class="panel panelStyle"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data- 
    toggle="collapse" data-parent="#accordion1" href="#collapseOne3">Course 
    Description &amp; Prerequisite </a></h4> 
     </div> 
     <div id="collapseOne3" class="panel-collapse collapse in 
    courseCollapse"> 
      <div class="panel-body"> 
      <p class="classDis"> 
       Learn challenging improv games and take your comic timing to 
    the next level.</p> 
       <p><em>(Pre-req: All students must have at least one previous 
    show experience)</em></p> 
      </div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
    <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
    </div> 
<!--Class--> 
<div class="col-md-3 col-sm-3 acting g2-6 mon s2 class" id="improve1b"> 
    <h4 class="className">Improve 1B</h4> 
    <p class="classInfo">Grades 2 – 6<br />Mondays Session 2</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion4" role="tablist" aria-multiselectable="true" > 
     <div class="panel panelStyle"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne4">Course Description &amp; Prerequisite </a></h4> 
     </div> 
     <div id="collapseOne4" class="panel-collapse collapse in courseCollapse"> 
      <div class="panel-body"> 
      <p class="classDis"> 
      Time to tickle the funny bone! This class is perfect for any young budding comic. Learn new short form improv games each week and start your path to comic genius.</p> 
      </div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
    <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
</div> 
<!--Class--> 
    </div><!-- acting classes section--> 
    </div><!-- acting container--> 

    <!-- Singing Classes --> 
    <h3 class="classTitle sing">Vocie Studio</h3> 
    <div class="container"> 
    <div class="row col-centered"> 
    <div class="col-md-3 col-sm-3 g7-12 mon s2 sing class" id="voice studio 1A"> 
    <h4 class="className">Voice Studio 1A</h4> 
    <p class="classInfo">Grades 7 – 12<br />Mondays Session 2</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion5" role="tablist" aria-multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne5">Course Discription </a></h4> 
     </div> 
     <div id="collapseOne5" class="panel-collapse collapse in courseCollapse"> 
      <div class="panel-body"> 
      <p class="classDis">Are you looking to learn proper singing technique or simply brush up on your vocal skills? The Voice Studio is the right class for you! Join our studio to practice good vocal habits, fundamental singing technique and understand how the vocal anatomy works to give you the best tone quality. You will be introduced to the art song and folk song genre.</p> 
      </div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
    <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
    </div> 
    <!--Class--> 
    <div class="col-md-3 col-sm-3 g2-6 mon s1 sing class" id="voiceStudio1b"> 
    <h4 class="className">Voice Studio 1B</h4> 
    <p class="classInfo">Grades 2 – 6<br />Mondays Session 1</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion6" role="tablist" aria-multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne6">Course Discription </a></h4> 
     </div> 
     <div id="collapseOne6" class="panel-collapse collapse in courseCollapse"> 
      <div class="panel-body"><p class="classDis">Are you looking to learn proper singing technique or simply brush up on your vocal skills? The Voice Studio is the right class for you! Join our studio to practice good vocal habits, fundamental singing technique and understand how the vocal anatomy works to give you the best tone quality. You will be introduced to the art song and folk song genre.</p></div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
     <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
    </div><!-- Class--> 
    <!--Class--> 
    <div class="col-md-3 col-sm-3 g7-12 thurs s2 sing class" id="voiceStudio2b"> 
    <h4 class="className">Voice Studio 2B</h4> 
    <p class="classInfo">Grades 2 – 6<br />Thursdays Session 2</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion7" role="tablist" aria-multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne7">Course Discription &amp; Prerequisite </a></h4> 
     </div> 
     <div id="collapseOne7" class="panel-collapse collapse in courseCollapse"> 
      <div class="panel-body"><p class="classDis">Continue your vocal journey and re-discover your voice in this next level of The Voice Studio. You will continue to develop your singing skills with an emphasis in tone quality and resonance. Students will expand their repertoire by adding music from the Broadway and jazz genres.</p> <p><em>(Students must take The Voice Studio 1A/1B, or audition, to be in this class.)</em></p></div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
    <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
</div><!-- Class--> 
<!--Class--> 
<div class="col-md-3 col-sm-3 g7-12 thurs s2 sing class" id="duets1a"> 
    <h4 class="className">Duets 1A</h4> 
    <p class="classInfo">Grades 7 – 12<br />Thursdays Session 2</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion8" role="tablist" aria-multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne8">Course Discription </a></h4> 
     </div> 
     <div id="collapseOne8" class="panel-collapse collapse in courseCollapse"> 
      <div class="panel-body"><p class="classDis">Do you love the harmonious sound of the Broadway duet? Would you like to feel confident singing with another person? This Duets class will be the perfect fit! Learn how to balance and blend with another singer and confidently sing harmonies. This is a skill that is critical to the musical theatre experience!</p></div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
    <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
</div><!-- Class--> 
</div> <!-- sing row ---> 
</div><!-- Sing contaner --> 




    <!-- Dance Classes --> 
    <h3 class="classTitle dance">Dance Classes</h3> 
<div class="container"> 
<div class="row col-centered"> 
<div class="col-md-3 col-sm-3 g7-12 mon s1 dance class" id="hiphop1a"> 
    <h4 class="className">Hip-Hop 1A</h4> 
    <p class="classInfo">Grades 7 – 12<br />Mondays Session 1</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion9" role="tablist" aria-multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne9">Course Discription </a></h4> 
     </div> 
     <div id="collapseOne9" class="panel-collapse collapse in courseCollapse"> 
      <div class="panel-body"> 
      <p class="classDis">Hip hop is an urban street dance style that infuses breaking, popping, locking, b-boy, funk and jazz. This high energy class is for beginners in 7th- 12th grades.</p> 
      </div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
    <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
</div> 
<!--Class--> 
<div class="col-md-3 col-sm-3 g2-6 thurs s2 dance class" id="hipHop1b"> 
    <h4 class="className">Hip-Hop 1B</h4> 
    <p class="classInfo">Grades 2 – 6<br />Thursdays Session 2</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion10" role="tablist" aria-multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne10">Course Discription </a></h4> 
     </div> 
     <div id="collapseOne10" class="panel-collapse collapse in courseCollapse"> 
      <div class="panel-body"><p class="classDis">Hip hop is an urban street dance style that infuses breaking, popping, locking, b-boy, funk and jazz. This high energy class is for beginners in 2nd- 6th grades.</p></div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
    <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
</div><!-- Class--> 
<!--Class--> 
<div class="col-md-3 col-sm-3 g7-12 thurs s2 dance class" id="tapB1a"> 
    <h4 class="className">Tap Basics 1A</h4> 
    <p class="classInfo">Grades 7 – 12<br />Thursdays Session 2</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion11" role="tablist" aria-multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne11">Course Discription </a></h4> 
     </div> 
     <div id="collapseOne11" class="panel-collapse collapse in courseCollapse"> 
      <div class="panel-body"><p class="classDis">This class, open to students in grades 7th and up, is designed for the development of basic tap technique and terminology highlighting the importance of rhythm and sound. The class will focus on classic Broadway style tap dance. No prior tap experience is required. We will work to create a percussive instrument out of our feet. Purchase of tap shoes is required prior to start of class. Preferably a black tied tap shoe that can be picked up at any dance shoe store.</p></div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
<!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
</div><!-- Class--> 
<!--Class--> 
<div class="col-md-3 col-sm-3 g2-6 thurs s1 dance class" id="TapB1b"> 
    <h4 class="className">Tap Basics 1B</h4> 
    <p class="classInfo">Grades 2 – 6<br />Thursdays Session 1</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion12" role="tablist" aria-multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne12">Course Discription </a></h4> 
     </div> 
     <div id="collapseOne12" class="panel-collapse collapse in courseCollapse"> 
      <div class="panel-body"><p class="classDis">This class, open to students in 2nd to 6th grades, is designed for the development of basic tap technique and terminology highlighting the importance of rhythm and sound. We will go slow in our exploration of beginner tap technique. The class will focus on classic Broadway style tap dance. We will work to create a percussive instrument out of our feet. Purchase of tap shoes is required prior to start of class. Preferably a black tied tap shoe that can be picked up at any dance shoe store.</p></div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
    <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
</div><!-- Class--> 
    <!--Class--> 
<div class="col-md-3 col-sm-3 g7-12 mon s2 dance class" id="Tap2a"> 
    <h4 class="className">Tap 2A</h4> 
    <p class="classInfo">Grades 7 – 12<br />Mondays Session 2</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion13" role="tablist" aria-multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne13">Course Discription &amp; Prerequisite </a></h4> 
     </div> 
     <div id="collapseOne13" class="panel-collapse collapse in courseCollapse"> 
      <div class="panel-body"><p class="classDis">Tap 2A is an upper level tap class for those who completed Tap 1A. Tap is designed to develop rhythm, musicality, and coordination.</p> 
       <p><em>(Pre-req: Tap 1A, or Tap 1B and 6th grade placement, or a placement audition)</em></p></div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
    <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
</div><!-- Class--> 
    <!--Class--> 
<div class="col-md-3 col-sm-3 g7-12 mon s1 dance class" id="Tap2b"> 
    <h4 class="className">Tap 2B</h4> 
    <p class="classInfo">Grades 7 – 12<br />Mondays Session 1</p> 
    <!-- course Discription --> 
    <div class="panel-group" id="accordion14" role="tablist" aria- 
multiselectable="true"> 
     <div class="panel"> 
     <div class="panel-heading" role="tab"> 
      <h4 class="panel-title" style="text-align: center;"><a data- 
toggle="collapse" data-parent="#accordion1" href="#collapseOne14">Course 
Discription </a></h4> 
     </div> 
     <div id="collapseOne14" class="panel-collapse collapse in courseCollapse"> 
      <div class="panel-body"><p class="classDis">Tap 2B is an upper level tap class for those who completed Tap 1B. Tap is designed to develop rhythm, musicality, and coordination.</p><p><em> (Pre-req: Tap 1B or a placement audition)!</em></p></div> 
      </div> 
     </div> 
    </div><!-- Corse description --> 
    <!-- add to cart Button--> 
    <div class="row"> 
      <div class="col-lg-12 cartBtn"> 
       <button class="addToCartBtnReg hidden">Add To Cart</button> 
      </div> 
     </div><!-- add to cart Button--> 
</div><!-- Class--> 
</div> <!-- dance row ---> 
</div><!-- dance contaner --> 

JQuery

$('.actBtn').click(function(){ 
    // change btn color 

    $('#actBtn').removeClass('actBtn').addClass('btnSelect'); 
    // hide other classes  

     if($('.sing ,.tech ,.dance').hasClass('hidden')){ 
    $('.sing ,.tech ,.dance').removeClass('hidden');} 
    else {$('.sing ,.tech ,.dance').addClass('hidden');} 
    }); 
    $('.voiceBtn').click(function(){ 
     // change btn color 
     $('#voiceBtn').removeClass('voiceBtn').addClass('btnSelect'); 
// hide other classes  
     $('.acting ,.tech ,.dance').addClass('hidden'); 
}); 
$('.danceBtn').click(function(){ 
    // change btn color 
     $('#danceBtn').removeClass('danceBtn').addClass('btnSelect'); 
// hide other classes  
     $('.sing ,.tech ,.acting').addClass('hidden'); 
}); 
$('.tchBtn').click(function(){ 
    // change btn color 
     $('#tchBtn').removeClass('tchBtn').addClass('btnSelect'); 
// hide other classes  
     $('.sing ,.acting ,.dance').addClass('hidden'); 
}); 
$('.s1Btn').click(function(){ 
// change btn color 
     $('#s1Btn').removeClass('s1Btn').addClass('btnSelect'); 
// hide other classes  
     $('.s2').addClass('hidden'); 
}); 
$('.s2Btn').click(function(){ 
    // change btn color 
     $('#s2Btn').removeClass('s2Btn').addClass('btnSelect'); 
// hide other classes  
     $('.s1').addClass('hidden'); 
}); 
$('.monBtn').click(function(){ 
    // change btn color 
     $('#monBtn').removeClass('monBtn').addClass('btnSelect'); 
// hide other classes  
     if($('.thurs').hasClass('hidden')){ 
     $('.thurs').removeClass('hidden');} 
    else {$('.thurs').addClass('hidden');} 
}); 
$('.thursBtn').click(function(){ 
// change btn color 
     $('#thursBtn').removeClass('thursBtn').addClass('btnSelect'); 
// hide other classes  
     $('.mon').addClass('hidden'); 
    }); 
$('.g2-6Btn').click(function(){ 
// change btn color 
     $('#g2-6Btn').removeClass('g2-6Btn').addClass('btnSelect'); 
// hide other classes  
     $('.g7-12').addClass('hidden'); 
    }); 
$('.g7-12Btn').click(function(){ 
// change btn color 
     $('#g7-12Btn').removeClass('g7-12Btn').addClass('btnSelect'); 
// hide other classes  
    $('.g2-6').addClass('hidden'); 
    }); 

// Lösche Buttong Funktion

$('#clearBtn').click(function() { 
if($('#thursBtn').hasClass('btnSelect')){ 
     $('#thursBtn').removeClass('btnSelect').addClass('thursBtn');} 


if($('#monBtn').hasClass('btnSelect')){ 
     $('#monBtn').removeClass('btnSelect').addClass('monBtn');} 

if($('#actBtn').hasClass('btnSelect')){ 
     $('#actBtn').removeClass('btnSelect').addClass('actBtn');} 

if($('#voiceBtn').hasClass('btnSelect')){ 
     $('#voiceBtn').removeClass('btnSelect').addClass('voiceBtn');} 

if($('#danceBtn').hasClass('btnSelect')){ 
     $('#danceBtn').removeClass('btnSelect').addClass('danceBtn');} 

if($('#tchBtn').hasClass('btnSelect')){ 
     $('#tchBtn').removeClass('btnSelect').addClass('tchBtn');} 

if($('#s1Btn').hasClass('btnSelect')){ 
     $('#s1Btn').removeClass('btnSelect').addClass('s1Btn');} 

if($('#s2Btn').hasClass('btnSelect')){ 
     $('#s2Btn').removeClass('btnSelect').addClass('s2Btn');} 

    if ($('.acting').hasClass('hidden')) { 
    $('.acting').removeClass('hidden'); 
} 
    if ($('.sing').hasClass('hidden')) { 
    $('.sing').removeClass('hidden'); 
} 
    if ($('.s1').hasClass('hidden')) { 
    $('.s1').removeClass('hidden'); 
} 
    if ($('.s2').hasClass('hidden')) { 
    $('.s2').removeClass('hidden'); 
} 
    if ($('.tech').hasClass('hidden')) { 
    $('.tech').removeClass('hidden'); 
} 
    if ($('.dance').hasClass('hidden')) { 
    $('.dance').removeClass('hidden'); 
} 
    if ($('.mon').hasClass('hidden')) { 
    $('.mon').removeClass('hidden'); 
} 
    if ($('.thurs').hasClass('hidden')) { 
    $('.thurs').removeClass('hidden'); 
} 
    if ($('.g2-6').hasClass('hidden')) { 
    $('.g2-6').removeClass('hidden'); 
} 
    if ($('.g7-12').hasClass('hidden')) { 
    $('.g7-12').removeClass('hidden'); 
} 
}); 

Answer 1

Wenn ich richtig verstehe, was Sie wollen, ist, dass, wenn Sie auf eine Schaltfläche von einem Klick spezifischer Filter, es zeigt/versteckt die divs, die diese Klassen haben, richtig?

In Anbetracht dessen, was Sie wollen, achten Sie darauf, dass Sie genau das gleiche mit jeder Taste tun wollen, und die einzige Sache, die sich ändert, ist die Liste der betroffenen Klassen für jeden Filter, um den Code zu vereinfachen, den wir wirklich brauchen Eine Klick-Funktion, die allen Schaltflächen zugeordnet ist, und innerhalb dieser Funktion erhalten wir diese Liste.

Mein Ansatz zunächst ein Objekt erstellen würde, die die Beziehungen zwischen den einzelnen Taste und der Liste der Klassen hat ...

var relations = { 
    actBtn: ['sing','tech','dance'], 
    voiceBtn: ['acting','tech','dance'], 
    danceBtn: ['sing','tech','acting'], 
    tchBtn: ['sing','acting','dance'], 
    ... 
}; 

... ich als Code verwendet haben für jeden die IDs Sie filtern verwende derzeit. Mit diesem können Sie nur eine Funktion erstellen, um alle Tasten zu handhaben ...

$('button').not('#clearBtn,#filterBtn').click(function() { 

    // Change button color. 
    $(this).toggleClass($(this).attr('id')+' btnSelect'); 

    if ($('button.btnSelect').length > 0) { 

     // Hide all divs 
     $('div.class').hide(); 

     // Show divs of all active filters. 
     $('button.btnSelect').each(function() { 
      $('.'+relations[$(this).attr('id')].join(',.')).show(); 
     }); 
    } 
    else { 
     $('div.class').show(); 
    } 
}); 

Wie Sie sehen können, mit diesem Ansatz Sie Ihren Code erheblich reduzieren können. Zum Anzeigen/Verbergen von Verhalten. Bedenkt man, dass man mehrere Filter gleichzeitig aktivieren kann und sich eine oder mehrere Klassen teilen kann, habe ich jedes Mal, wenn man einen Filter drückt, zuerst alle divs ausgeblendet und dann alle aktiven Filter überprüft ihre entsprechenden Klassen, so dass Sie keinen Zustand beibehalten müssen.

Und für die Löschtaste ...

$('button#clearBtn').click(function() { 

    // Deactivate all buttons. 
    $('button').removeClass('btnSelect').each(function() { 
     if (!$(this).hasClass($(this).attr('id'))) 
      $(this).addClass($(this).attr('id')); 
    }); 

    // Show all div's. 
    $('.'+filters.join(',.')).show(); 
}); 

Ich verstehe nicht, warum Sie auf die Schaltfläche Klasse hinzufügen/entfernen, wenn Sie darauf klicken (in der Tat, ich den Punkt, dass nicht sehen Klasse, Sie haben bereits die ID mit dem gleichen Wert), ich habe es getan, weil Sie es haben und vielleicht hat es andere Beziehungen, aber ich würde nur hinzufügen/entfernen btnSelect Klasse, um anzugeben, ob die Schaltfläche ausgewählt ist oder nicht. Ich sehe auch nicht den Sinn der Filter Taste. Ich denke, Sie brauchen es nicht mit diesem Ansatz.

Und es ist einfach zu ändern, um es an Ihre Präferenzen anzupassen, weil Sie nur mit einer Funktion beschäftigen.

Ich hoffe, es