javascript - 使用 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()，这允许将它们链接在一起并允许“全部”的自然行为而不是使用一堆 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 中所做的唯一更改是将值“All”更改为“.”。这样你就不需要一堆 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>