篩選清單結果 <select/>下拉列表值

Question

我正在嘗試使用jQuery和CSS通過標簽過濾“項目索引”。

我目前正在<select>下拉列表中使用所選選項的.val() ，並檢查它是否等於.tag的內部.html() 。 如果它們匹配，它將使項目條目為黑色，否則將使其為淺灰色。

當項目有一個標簽時，我當前的代碼有效，但是一旦有多個標簽，它就會中斷。 我的猜測是，因為盡管有一個.tag等於選定的下拉值，但另一個.tag沒有，因此使用else條件？

我想念什么？ 有沒有更好/更有效的方法來做到這一點？

的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

嘗試這個

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

這是為您准備的簡單工作代碼。 您所做的完全正確，只是您需要為ul分配一個類並對此進行檢查。 試試下面的代碼：

 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

因為您要遍歷所有標簽，並對每個標簽進行適當的樣式設置，所以它只會顯示每個條目的最后一個標簽的樣式。

如果按每個條目循環，而不是按每個條目中的標記循環，則一旦找到與所選標記匹配的標記，就可以退出循環。

// 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>