使用 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() {&nbsp; &nbsp; runAllFilters();});function runAllFilters() {&nbsp; &nbsp; var list = $(".news-list .news-item");&nbsp; &nbsp; $(list).fadeOut("fast");&nbsp; &nbsp; var filtered = $(".news-list article");&nbsp; &nbsp; // Get all filter values&nbsp; &nbsp; var cost = $('select#sort-cost').val();&nbsp; &nbsp; var city = $('select#sort-city').val();&nbsp; &nbsp; var age = $('select#sort-age').val();&nbsp; &nbsp; // Filter based on all of them&nbsp;&nbsp; &nbsp; filtered = filtered.filter(function() {&nbsp; &nbsp; &nbsp; &nbsp; return RegExp(cost).test($(this).attr("data-category")) &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; RegExp(age).test($(this).attr("data-age")) &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; RegExp(city).test($(this).attr("data-city"));&nbsp; &nbsp; });&nbsp; &nbsp; // Show message if there are no results&nbsp; &nbsp; filtered.length === 0&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; ? $('.news-list').append("<p id='noresults'>No Results!</p>")&nbsp; &nbsp; &nbsp; &nbsp; : $('#noresults').remove()&nbsp; &nbsp; // Display Them&nbsp; &nbsp; filtered.each(function (i) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).delay(100).slideDown("fast");&nbsp; &nbsp; &nbsp; &nbsp; });};这种方法还减少了代码中的大量重复。我在 HTML 中唯一更改的是将值“全部”更改为“。” 这样你就不需要一堆 if 语句；在正则表达式“。” 匹配一切，所以它按原样工作。<select name="sort-cost" id="sort-cost">&nbsp; &nbsp; <option value=".">All</option>&nbsp; &nbsp; <option value="1">Bestsellers</option>&nbsp; &nbsp; <option value="2">Sales</option></select>&nbsp;// If any of the filters change$('select').change(function() {&nbsp; runAllFilters();});function runAllFilters() {&nbsp; var list = $(".news-list .news-item");&nbsp; $(list).fadeOut("fast");&nbsp; var filtered = $(".news-list article");&nbsp; // Get all filter values&nbsp; var cost = $('select#sort-cost').val();&nbsp; var city = $('select#sort-city').val();&nbsp; var age = $('select#sort-age').val();&nbsp; // Filter based on all of them&nbsp;&nbsp; filtered = filtered.filter(function() {&nbsp; &nbsp; return RegExp(cost).test($(this).attr("data-category")) &&&nbsp; &nbsp; &nbsp; RegExp(age).test($(this).attr("data-age")) &&&nbsp; &nbsp; &nbsp; RegExp(city).test($(this).attr("data-city"));&nbsp; });&nbsp; filtered.length === 0&nbsp;&nbsp; &nbsp; ? $('.news-list').append("<p id='noresults'>No Results!</p>")&nbsp; &nbsp; : $('#noresults').remove()&nbsp; // Display Them&nbsp; filtered.each(function (i) {&nbsp; &nbsp; &nbsp; $(this).delay(100).slideDown("fast");&nbsp; &nbsp; });};.news-item{&nbsp; display:inline-block;&nbsp; vertical-align:top;&nbsp; width:20%;&nbsp; text-align:center;&nbsp; background: #fff;&nbsp; border:1px solid #333;&nbsp; float:left;}&nbsp;&nbsp;.sort{&nbsp; display:inline-block;&nbsp; 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&nbsp; <select name="sort-cost" id="sort-cost">&nbsp; &nbsp; <option value=".">All</option>&nbsp; &nbsp; <option value="1">Bestsellers</option>&nbsp; &nbsp; <option value="2">Sales</option>&nbsp; </select>&nbsp;</div><div class="sort">AGE<select name="sort-age" id="sort-age">&nbsp; <option value=".">All</option>&nbsp; <option value="a">3+</option>&nbsp; <option value="b">5+</option>&nbsp; <option value="c">9+</option></select></div><div class="sort">CITY<select name="sort-city" id="sort-city">&nbsp; <option value=".">All</option>&nbsp; <option value="ny">New York</option>&nbsp; <option value="la">Los Angeles</option>&nbsp; <option value="lv">Las Vegas</option></select></div><br><br><section class="news-list">&nbsp; <article class="news-item" data-category="1 2" data-age="a" data-city="la lv ny">&nbsp; &nbsp; <div class="thumb">&nbsp; &nbsp; &nbsp; <img src="http://placehold.it/100x100">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="news-txt">&nbsp; &nbsp; &nbsp; <p>First one</p>&nbsp; &nbsp; </div>&nbsp; </article>&nbsp; <article class="news-item" data-category="1" data-age="a b" data-city="ny">&nbsp; &nbsp; <div class="thumb">&nbsp; &nbsp; &nbsp; <img src="http://placehold.it/100x100">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="news-txt">&nbsp; &nbsp; &nbsp; <p>Second one</p>&nbsp; &nbsp; </div>&nbsp; </article>&nbsp; <article class="news-item" data-category="2" data-age="a b" data-city="la ny">&nbsp; &nbsp; <div class="thumb">&nbsp; &nbsp; &nbsp; <img src="http://placehold.it/100x100">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="news-txt">&nbsp; &nbsp; &nbsp; <p>Third one</p>&nbsp; &nbsp; </div>&nbsp; </article>&nbsp; <article class="news-item" data-category="1 2" data-age="c" data-city="la lv ny">&nbsp; &nbsp; <div class="thumb">&nbsp; &nbsp; &nbsp; <img src="http://placehold.it/100x100">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="news-txt">&nbsp; &nbsp; &nbsp; <p>Fifth</p>&nbsp; &nbsp; </div>&nbsp; </article></section>