這里有兩個問題，一個是你覆蓋了你的函數，所以當你只有一個時你認為你有三個，而且你沒有一次過濾所有過濾器。
您在這里想要的不是三個復制粘貼的函數，而是一個在每次發生變化時應用所有三個過濾器的函數。
我還將它更改為使用正則表達式而不是 .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>
