使用 jQuery 过滤多个选择字段 [英] Multiple select fields filtering with jQuery

问题描述

我尝试用 JS 创建简单的过滤，但我在多个选择字段时遇到问题，它们不能协同工作，结果很疯狂(有时什么也没有显示).如果我只使用一个选择，一切都很好，当我尝试添加第二个时，或者第三个结果不正确或我得到空白页.

这是我的代码:https://jsfiddle.net/au6jbsL5/

这是我的过滤器功能(我有 3 个功能 - 每个选择组一个)

$('select#sort-cost').change(function() {var filter = $(this).val()过滤器列表(过滤器)；});函数过滤器列表(值){var list = $(".news-list .news-item");$(list).fadeOut("fast");如果(值==全部"){$(".news-list").find("article").each(function (i) {$(this).delay(100).slideDown("fast");});} 别的 {$(".news-list").find("article[data-category*=" + value + "]").each(function (i) {$(this).delay(100).slideDown("fast");});}}

解决方案

这里有两个问题，一个是你覆盖了你的函数，所以当你只有一个的时候你认为你有三个，但实际上你没有一次过滤所有过滤器.

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

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

//如果任何过滤器发生变化$('select').change(function() {运行所有过滤器()；});函数 runAllFilters() {var list = $(".news-list .news-item");$(list).fadeOut("fast");var 过滤 = $(".news-list 文章");//获取所有过滤器值var cost = $('select#sort-cost').val();var city = $('select#sort-city').val();var age = $('select#sort-age').val();//基于所有的过滤器过滤 = 过滤.过滤器(功能(){return RegExp(cost).test($(this).attr("data-category")) &&RegExp(age).test($(this).attr("data-age")) &&RegExp(city).test($(this).attr("data-city"));});//如果没有结果则显示消息过滤后的长度 === 0?$('.news-list').append("<p id='noresults'>没有结果！</p>"): $('#noresults').remove()//显示它们过滤.每个(功能(我){$(this).delay(100).slideDown("fast");});};

这种方法也减少了代码中的大量重复.

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

<option value=".">All</option><option value="1">畅销书</option><option value="2">销售</option></选择>
//如果任何过滤器发生变化$('select').change(function() {运行所有过滤器()；});函数 runAllFilters() {var list = $(".news-list .news-item");$(list).fadeOut("fast");var 过滤 = $(".news-list 文章");//获取所有过滤器值var cost = $('select#sort-cost').val();var city = $('select#sort-city').val();var age = $('select#sort-age').val();//基于所有的过滤器过滤 = 过滤.过滤器(功能(){return RegExp(cost).test($(this).attr("data-category")) &&RegExp(age).test($(this).attr("data-age")) &&RegExp(city).test($(this).attr("data-city"));});过滤后的长度 === 0?$('.news-list').append("<p id='noresults'>没有结果！</p>"): $('#noresults').remove()//显示它们过滤.每个(功能(我){$(this).delay(100).slideDown("fast");});};
.news-item{显示:内联块；垂直对齐:顶部；宽度:20%；文字对齐:居中；背景:#fff;边框:1px 实心 #333;向左飘浮;}.种类{显示:内联块；边距右:30px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><h1>现在排序</h1><div class="sort">成本<select name="sort-cost" id="sort-cost"><option value=".">All</option><option value="1">畅销书</option><option value="2">销售</option></选择>
<div class="sort">年龄<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></选择>
<div class="sort">城市<select name="sort-city" id="sort-city"><option value=".">All</option><option value="ny">纽约</option><option value="la">洛杉矶</option><option value="lv">拉斯维加斯</option></选择>
<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 class="news-txt"><p>第一个</p>
</文章><article class="news-item" data-category="1" data-age="a b" data-city="ny"><div class="thumb"><img src="http://placehold.it/100x100">
<div class="news-txt"><p>第二个</p>
</文章><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 class="news-txt"><p>第三个</p>
</文章><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 class="news-txt"><p>第五</p>
</文章></section>
I try to create simple filtering with JS but I have problem with multiple select fields, they are not cooperate together, and results going crazy (sometimes nothing shows). Everything is good if I use only one select, when I try to add second one, or third one results are not correct or I got blank page.

Here is my code: https://jsfiddle.net/au6jbsL5/

And here is my filter function (I have 3 functions - one for each select group)
$('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");
    });
}
}

解决方案
There's two problems here, one that you're overwriting your function, so you think you have three when you only have one, but also that you're not filtering by all the filters at once. 

What you want here is not three copy-pasted functions, but instead one function that applies all three filters each time something changes.

I also changed it to use regular expressions instead of .find(), which is what allows them to be chained together and allows for a natural behavior of 'all' instead of using a bunch of if statements. 
// 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");
        });
};
This approach also takes a lot of the repetition out of the code. 

The only thing I changed in the HTML is to change the value 'All' to just '.' so that you don't need a bunch of if statements; in RegEx "." matches everything so it works as-is.
<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>





                        
这篇关于使用 jQuery 过滤多个选择字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
                        
                    
                    
                
				

                            
                        
                

            
        
        

            



        
        
        

            



        
    
    


    

    

        

            登录
            关闭
        
        

            

                扫码关注1秒登录
            
            

                
            
            

                
                
            

发送“验证码”获取 | 15天全站免登陆

友情链接： IT屋 Chrome插件 谷歌浏览器插件

IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图 站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.