javascript - 使用 <select/> 下拉列表值过滤列表结果

Question

我正在尝试使用 jQuery 和 CSS 按标签过滤“元素索引”。

我目前正在使用 .val() <select> 中所选选项的下拉列表并检查它是否等于内部 .html()的.tag 。如果它们匹配，则元素条目将变为黑色，否则，它将使其变为浅灰色。

当元素有一个标签时，我当前的代码可以工作，但一旦有多个标签，它就会崩溃。我的猜测是因为虽然有一个 .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

这是一个简单的工作代码。您所做的完全正确，只是您需要为 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>