简体   繁体   English

筛选清单结果 <select/>下拉列表值

[英]Filter list results with <select/> drop-down list value

I am trying to filter a 'Project Index' by tags using jQuery and CSS. 我正在尝试使用jQuery和CSS通过标签过滤“项目索引”。

I am currently taking the .val() of the selected option in a <select> dropdown list and checking if it's equal to the inner .html() of a .tag . 我目前正在<select>下拉列表中使用所选选项的.val() ,并检查它是否等于.tag的内部.html() If they match it will make the project entry black, if else it will make it light gray. 如果它们匹配,它将使项目条目为黑色,否则将使其为浅灰色。

My current code works when the project has one tag, but once there are multiple tags it breaks. 当项目有一个标签时,我当前的代码有效,但是一旦有多个标签,它就会中断。 My guess is that because although there is one .tag equal to the selected dropdown value, the other .tag are not, therefore using the else condition? 我的猜测是,因为尽管有一个.tag等于选定的下拉值,但另一个.tag没有,因此使用else条件?

What am I missing? 我想念什么? Is there a better/more efficient way to do this? 有没有更好/更有效的方法来做到这一点?

HTML 的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 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');
      }
    });
  });

Try this 尝试这个

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');
                }
            }
        });
    });
});

Here is a simple working code for you. 这是为您准备的简单工作代码。 What you are doing is exactly right, except that you need to assign a class to the ul and have a check for that too. 您所做的完全正确,只是您需要为ul分配一个类并对此进行检查。 Try the below 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> 

Because you're looping trough all the tags, and aply styling for each tag it will only show the styling for the last tag of each entry. 因为您要遍历所有标签,并对每个标签进行适当的样式设置,所以它只会显示每个条目的最后一个标签的样式。

If you loop per entry, and than per tag in each entry you can break out of the loop once you have found a tag that matches the selected tag. 如果按每个条目循环,而不是按每个条目中的标记循环,则一旦找到与所选标记匹配的标记,就可以退出循环。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM