Filterliste Ergebnisse mit <select/> Dropdown-Liste Wert

Question

Ich versuche, einen 'Project Index' durch Tags mit jQuery und CSS zu filtern.

ich zur Zeit unter den .val() der ausgewählten Option in einer <select> Dropdown-Liste und prüfen, ob es an die inneren .html() ein .tag gleich ist. Wenn sie übereinstimmen, wird der Projekteintrag schwarz, wenn er sonst hellgrau wird.

Mein aktueller Code funktioniert, wenn das Projekt ein Tag hat, aber wenn es mehrere Tags gibt, bricht es. Meine Vermutung ist, dass, obwohl es eine gleich dem ausgewählten Dropdown-Wert gibt, die anderen sind nicht, deshalb mit der else Bedingung?

Was fehlt mir? Gibt es einen besseren/effizienteren Weg dies zu tun?

HTML

<main> 
    <div class="index__container"> 
    <section class="index"> 
     <ul class="index__header"> 
      <li>Project</li> 
      <li>Filter: <select id="index__filter"> 
       <option selected="selected" value='ALL'>All</option> 
       <option value="Pedagogical Explorations">Pedagogical Explorations</option> 
       <option value="Research Production">Research Production</option> 
       <option value="Spatial Practice">Spatial Practice</option> 
       <option value="Exhibition">Exhibition</option> 
      </select></li> 
      <li>Year</li> 
     </ul> 
     <a href=""> 
      <ul class="index__entry"> 
       <li>Multiscale Strategies to Reactivate Transhumance in Spain</li> 
       <li> 
        <span class="tag">Spatial Practice</span> 
       </li> 
       <li>2017</li> 
      </ul> 
     </a> 
     <a href=""> 
      <ul class="index__entry"> 
       <li>Architecture after Speculation</li> 
       <li> 
        <span class="tag">Research Production</span> 
       </li> 
       <li>2017</li> 
      </ul> 
     </a> 
     <a href=""> 
      <ul class="index__entry"> 
       <li>Polyester Merino Chair</li> 
       <li> 
        <span class="tag">Spatial Practice</span> 
       </li> 
       <li>2017</li> 
      </ul> 
     </a> 
     <a href=""> 
      <ul class="index__entry"> 
       <li>1500 caracteres</li> 
       <li> 
        <span class="tag">Spatial Practice</span> 
        <span class="tag">Research Production</span> 
       </li> 
       <li>2017</li> 
      </ul> 
     </a> 
     <a href=""> 
      <ul class="index__entry"> 
       <li>Europan 13: Die Arbeitersiedlung</li> 
       <li> 
        <span class="tag">Spatial Practice</span> 
       </li> 
       <li>2015</li> 
      </ul> 
     </a> 
     <a href=""> 
      <ul class="index__entry"> 
       <li>Asymmetric Meta-Mapping</li> 
       <li> 
        <span class="tag">Pedagogical Explorations</span> 
       </li> 
       <li>2017</li> 
      </ul> 
     </a> 
     <a href=""> 
      <ul class="index__entry"> 
       <li>Chicago Architecture Biennial</li> 
       <li> 
        <span class="tag">Spatial Practice</span> 
        <span class="tag">Research Production</span> 
        <span class="tag">Exhibition</span></li> 
       <li>2015</li> 
      </ul> 
     </a> 
    </section> 
</div> 

JS

// Filter Project Index 
    var $indexSelect = $('#index__filter'); 
    var $indexEntry = $('.index__entry'); 
    var $tag = $('.tag'); 

    $indexSelect.change(function(){ 
    var selectedValue = $(this).val(); 
    if(selectedValue == 'ALL'){ 
     $indexEntry.css('color', 'black'); 
    return; 
    } 

    $tag.each(function(i,option){ 
    if ($(this).html() == selectedValue) { 
     $(this).closest('ul').css('color', 'black'); 
     console.log($(this).text()); 
     } else { 
     $(this).closest('ul').css('color', 'lightgray'); 
     } 
    }); 
    }); 

Answer 1

dieses Versuchen

var $indexSelect = $('#index__filter'); 
var $indexEntry = $('.index__entry'); 


$indexSelect.change(function() { 
    var selectedValue = $(this).val(); 
    if (selectedValue == 'ALL') { 
     $indexEntry.css('color', 'black'); 
     return; 
    } 

    $indexEntry.each(function(i, option) { 
     debugger; 
     var $tag = $(this).find('.tag'); 
     var flag = true; 
     $tag.each(function(i, option) { 
      if (flag == true) { 
       if ($(this).html() == selectedValue) { 
        $(this).closest('ul').css('color', 'black'); 
        console.log($(this).text()); 
        flag = false; 
       } else { 
        $(this).closest('ul').css('color', 'lightgray'); 
       } 
      } 
     }); 
    }); 
}); 

Answer 2

Hier ist ein einfaches Arbeits Code für Sie. Was Sie tun, ist genau richtig, außer dass Sie dem ul eine Klasse zuweisen müssen und auch dafür einen Check haben. Versuchen Sie, den folgenden Code:

var $indexSelect = $('#index__filter'); 
 
var $indexEntry = $('.index__entry'); 
 
var $tag = $('.tag'); 
 

 
$indexSelect.change(function() { 
 
    $indexEntry.removeClass('selected'); 
 
    var selectedValue = $(this).val(); 
 
    if (selectedValue == 'ALL') { 
 
    $indexEntry.css('color', 'black'); 
 
    return; 
 
    } 
 

 
    $tag.each(function(i, option) { 
 
    if (!$(this).closest('ul').hasClass('selected')) { 
 
     $(this).closest('ul').css('color', 'lightgray'); 
 
     if ($(this).html() == selectedValue) { 
 
     $(this).closest('ul').css('color', 'black').addClass('selected'); 
 
     //console.log($(this).text()); 
 
     } 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<main> 
 
    <div class="index__container"> 
 
    <section class="index"> 
 
     <ul class="index__header"> 
 
     <li>Project</li> 
 
     <li>Filter: <select id="index__filter"> 
 
       <option selected="selected" value='ALL'>All</option> 
 
       <option value="Pedagogical Explorations">Pedagogical Explorations</option> 
 
       <option value="Research Production">Research Production</option> 
 
       <option value="Spatial Practice">Spatial Practice</option> 
 
       <option value="Exhibition">Exhibition</option> 
 
      </select></li> 
 
     <li>Year</li> 
 
     </ul> 
 
     <a href=""> 
 
     <ul class="index__entry"> 
 
      <li>Multiscale Strategies to Reactivate Transhumance in Spain</li> 
 
      <li> 
 
      <span class="tag">Spatial Practice</span> 
 
      </li> 
 
      <li>2017</li> 
 
     </ul> 
 
     </a> 
 
     <a href=""> 
 
     <ul class="index__entry"> 
 
      <li>Architecture after Speculation</li> 
 
      <li> 
 
      <span class="tag">Research Production</span> 
 
      </li> 
 
      <li>2017</li> 
 
     </ul> 
 
     </a> 
 
     <a href=""> 
 
     <ul class="index__entry"> 
 
      <li>Polyester Merino Chair</li> 
 
      <li> 
 
      <span class="tag">Spatial Practice</span> 
 
      </li> 
 
      <li>2017</li> 
 
     </ul> 
 
     </a> 
 
     <a href=""> 
 
     <ul class="index__entry"> 
 
      <li>1500 caracteres</li> 
 
      <li> 
 
      <span class="tag">Spatial Practice</span> 
 
      <span class="tag">Research Production</span> 
 
      </li> 
 
      <li>2017</li> 
 
     </ul> 
 
     </a> 
 
     <a href=""> 
 
     <ul class="index__entry"> 
 
      <li>Europan 13: Die Arbeitersiedlung</li> 
 
      <li> 
 
      <span class="tag">Spatial Practice</span> 
 
      </li> 
 
      <li>2015</li> 
 
     </ul> 
 
     </a> 
 
     <a href=""> 
 
     <ul class="index__entry"> 
 
      <li>Asymmetric Meta-Mapping</li> 
 
      <li> 
 
      <span class="tag">Pedagogical Explorations</span> 
 
      </li> 
 
      <li>2017</li> 
 
     </ul> 
 
     </a> 
 
     <a href=""> 
 
     <ul class="index__entry"> 
 
      <li>Chicago Architecture Biennial</li> 
 
      <li> 
 
      <span class="tag">Spatial Practice</span> 
 
      <span class="tag">Research Production</span> 
 
      <span class="tag">Exhibition</span></li> 
 
      <li>2015</li> 
 
     </ul> 
 
     </a> 
 
    </section> 
 
    </div>

Answer 3

Weil du Looping Trog alle Tags und aply Styling für jeden Tag wird es zeigen nur das Styling für den letzten Tag eines jeden Eintrag.

Wenn Sie eine Schleife pro Eintrag und dann pro Tag in jedem Eintrag ausführen, können Sie aus der Schleife ausbrechen, sobald Sie ein Tag gefunden haben, das dem ausgewählten Tag entspricht.

// loop trough each entry 
$indexEntry.each(function(i,entry){ 
    // loop trough tag iwithin the entry 
    $(this).find('.tag').each(function(i, tag){ 
    if ($(this).html() == selectedValue) { 
     $(this).closest('ul').css('color', 'black'); 
     // exit this loop as soon as we've determined it should be black 
     return false; 
    } else { 
     $(this).closest('ul').css('color', 'lightgray'); 
    } 
    }) 
}) 

$(function(){ 
 
// Filter Project Index 
 
    var $indexSelect = $('#index__filter'); 
 
    var $indexEntry = $('.index__entry'); 
 
    var $tag = $('.tag'); 
 

 
    $indexSelect.change(function(){ 
 
    var selectedValue = $(this).val(); 
 
    if(selectedValue == 'ALL'){ 
 
     $indexEntry.css('color', 'black'); 
 
    return; 
 
    } 
 

 
    $indexEntry.each(function(i,entry){ 
 
     $(this).find('.tag').each(function(i, tag){ 
 
     if ($(this).html() == selectedValue) { 
 
      $(this).closest('ul').css('color', 'black'); 
 
      return false; 
 
      console.log($(this).text()); 
 
      } else { 
 
      $(this).closest('ul').css('color', 'lightgray'); 
 
      } 
 
     }) 
 
    }) 
 

 
    
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<main> 
 
    <div class="index__container"> 
 
    <section class="index"> 
 
     <ul class="index__header"> 
 
      <li>Project</li> 
 
      <li>Filter: <select id="index__filter"> 
 
       <option selected="selected" value='ALL'>All</option> 
 
       <option value="Pedagogical Explorations">Pedagogical Explorations</option> 
 
       <option value="Research Production">Research Production</option> 
 
       <option value="Spatial Practice">Spatial Practice</option> 
 
       <option value="Exhibition">Exhibition</option> 
 
      </select></li> 
 
      <li>Year</li> 
 
     </ul> 
 
     <a href=""> 
 
      <ul class="index__entry"> 
 
       <li>Multiscale Strategies to Reactivate Transhumance in Spain</li> 
 
       <li> 
 
        <span class="tag">Spatial Practice</span> 
 
       </li> 
 
       <li>2017</li> 
 
      </ul> 
 
     </a> 
 
     <a href=""> 
 
      <ul class="index__entry"> 
 
       <li>Architecture after Speculation</li> 
 
       <li> 
 
        <span class="tag">Research Production</span> 
 
       </li> 
 
       <li>2017</li> 
 
      </ul> 
 
     </a> 
 
     <a href=""> 
 
      <ul class="index__entry"> 
 
       <li>Polyester Merino Chair</li> 
 
       <li> 
 
        <span class="tag">Spatial Practice</span> 
 
       </li> 
 
       <li>2017</li> 
 
      </ul> 
 
     </a> 
 
     <a href=""> 
 
      <ul class="index__entry"> 
 
       <li>1500 caracteres</li> 
 
       <li> 
 
        <span class="tag">Spatial Practice</span> 
 
        <span class="tag">Research Production</span> 
 
       </li> 
 
       <li>2017</li> 
 
      </ul> 
 
     </a> 
 
     <a href=""> 
 
      <ul class="index__entry"> 
 
       <li>Europan 13: Die Arbeitersiedlung</li> 
 
       <li> 
 
        <span class="tag">Spatial Practice</span> 
 
       </li> 
 
       <li>2015</li> 
 
      </ul> 
 
     </a> 
 
     <a href=""> 
 
      <ul class="index__entry"> 
 
       <li>Asymmetric Meta-Mapping</li> 
 
       <li> 
 
        <span class="tag">Pedagogical Explorations</span> 
 
       </li> 
 
       <li>2017</li> 
 
      </ul> 
 
     </a> 
 
     <a href=""> 
 
      <ul class="index__entry"> 
 
       <li>Chicago Architecture Biennial</li> 
 
       <li> 
 
        <span class="tag">Spatial Practice</span> 
 
        <span class="tag">Research Production</span> 
 
        <span class="tag">Exhibition</span></li> 
 
       <li>2015</li> 
 
      </ul> 
 
     </a> 
 
    </section> 
 
</div>