使用 jQuery 过滤多个选择字段

Question

我尝试用 JS 创建简单的过滤，但我有多个选择字段的问题，它们不合作，结果很疯狂（有时什么也没显示）。如果我只使用一个选择，当我尝试添加第二个或第三个结果不正确或我得到空白页时，一切都很好。这是我的代码：https : //jsfiddle.net/au6jbsL5/这是我的过滤器功能（我有 3 个功能 - 每个选择组一个）$('select#sort-cost').change(function() {var filter = $(this).val()filterList(filter);});function filterList(value) {var list = $(".news-list .news-item");$(list).fadeOut("fast");if (value == "All") {    $(".news-list").find("article").each(function (i) {        $(this).delay(100).slideDown("fast");    });} else {    $(".news-list").find("article[data-category*=" + value + "]").each(function (i) {        $(this).delay(100).slideDown("fast");    });}}

Answer 1

这里有两个问题，一个是你覆盖了你的函数，所以当你只有一个时你认为你有三个，而且你没有一次过滤所有过滤器。

您在这里想要的不是三个复制粘贴的函数，而是一个在每次发生变化时应用所有三个过滤器的函数。

我还将它更改为使用正则表达式而不是 .find()，这允许它们链接在一起并允许“all”的自然行为，而不是使用一堆 if 语句。

// If any of the filters change

$('select').change(function() {

    runAllFilters();

});

function runAllFilters() {

    var list = $(".news-list .news-item");

    $(list).fadeOut("fast");

    var filtered = $(".news-list article");

    // Get all filter values

    var cost = $('select#sort-cost').val();

    var city = $('select#sort-city').val();

    var age = $('select#sort-age').val();

    // Filter based on all of them 

    filtered = filtered.filter(function() {

        return RegExp(cost).test($(this).attr("data-category")) &&

            RegExp(age).test($(this).attr("data-age")) &&

            RegExp(city).test($(this).attr("data-city"));

    });

    // Show message if there are no results

    filtered.length === 0 

        ? $('.news-list').append("<p id='noresults'>No Results!</p>")

        : $('#noresults').remove()

    // Display Them

    filtered.each(function (i) {

            $(this).delay(100).slideDown("fast");

        });

};

这种方法还减少了代码中的大量重复。

我在 HTML 中唯一更改的是将值“全部”更改为“。” 这样你就不需要一堆 if 语句；在正则表达式“。” 匹配一切，所以它按原样工作。

<select name="sort-cost" id="sort-cost">

    <option value=".">All</option>

    <option value="1">Bestsellers</option>

    <option value="2">Sales</option>

</select> 

// If any of the filters change

$('select').change(function() {

  runAllFilters();

});

function runAllFilters() {

  var list = $(".news-list .news-item");

  $(list).fadeOut("fast");

  var filtered = $(".news-list article");

  // Get all filter values

  var cost = $('select#sort-cost').val();

  var city = $('select#sort-city').val();

  var age = $('select#sort-age').val();

  // Filter based on all of them 

  filtered = filtered.filter(function() {

    return RegExp(cost).test($(this).attr("data-category")) &&

      RegExp(age).test($(this).attr("data-age")) &&

      RegExp(city).test($(this).attr("data-city"));

  });

  filtered.length === 0 

    ? $('.news-list').append("<p id='noresults'>No Results!</p>")

    : $('#noresults').remove()

  // Display Them

  filtered.each(function (i) {

      $(this).delay(100).slideDown("fast");

    });

};

.news-item{

  display:inline-block;

  vertical-align:top;

  width:20%;

  text-align:center;

  background: #fff;

  border:1px solid #333;

  float:left;

}  

.sort{

  display:inline-block;

  margin-right:30px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>SORT NOW</h1>

<div class="sort">

COST

  <select name="sort-cost" id="sort-cost">

    <option value=".">All</option>

    <option value="1">Bestsellers</option>

    <option value="2">Sales</option>

  </select> 

</div>

<div class="sort">

AGE

<select name="sort-age" id="sort-age">

  <option value=".">All</option>

  <option value="a">3+</option>

  <option value="b">5+</option>

  <option value="c">9+</option>

</select>

</div>

<div class="sort">

CITY

<select name="sort-city" id="sort-city">

  <option value=".">All</option>

  <option value="ny">New York</option>

  <option value="la">Los Angeles</option>

  <option value="lv">Las Vegas</option>

</select>

</div>

<br><br>

<section class="news-list">

  <article class="news-item" data-category="1 2" data-age="a" data-city="la lv ny">

    <div class="thumb">

      <img src="http://placehold.it/100x100">

    </div>

    <div class="news-txt">

      <p>First one</p>

    </div>

  </article>

  <article class="news-item" data-category="1" data-age="a b" data-city="ny">

    <div class="thumb">

      <img src="http://placehold.it/100x100">

    </div>

    <div class="news-txt">

      <p>Second one</p>

    </div>

  </article>

  <article class="news-item" data-category="2" data-age="a b" data-city="la ny">

    <div class="thumb">

      <img src="http://placehold.it/100x100">

    </div>

    <div class="news-txt">

      <p>Third one</p>

    </div>

  </article>

  <article class="news-item" data-category="1 2" data-age="c" data-city="la lv ny">

    <div class="thumb">

      <img src="http://placehold.it/100x100">

    </div>

    <div class="news-txt">

      <p>Fifth</p>

    </div>

  </article>

</section>