基于多选的Javascript/jquery过滤结果

codeneng 2023-03-28 原文

Javascript/jquery filter results based on multiple selections

我正在尝试为需要根据多个标准优化结果的问题找到解决方案。
我有多个选择标准：

水果——苹果橙葡萄

蔬菜——番茄土豆西兰花

坚果——核桃花生杏仁

谷类——玉米小麦大米

香料——肉桂姜胡椒

用户只能从每个组中选择一个条件，例如您可以选择苹果，但不能选择橙子或葡萄。见 jsfiddle.

然后我有多个篮子，里面装着不同的物品。

1
2
3
4
5

Result1
Result2
Result3
Result4
Result5

但问题是这些结果必须基于多个标准进行细化。例如，我先选择了苹果，然后选择了番茄，所以我需要优化结果，使该用户只能看到苹果和番茄的结果。

这是我的 jsfiddle。目前仅根据一个标准(关键字)过滤结果，但我需要以某种方式包括其他。

请澄清并更准确。我查看了您的 jsFiddle，它似乎适用于多个标准？当我选择 Apple 和 Pepper 时，它只显示 Result2。这似乎是正确的，不是吗？
我改变了一点结果，所以你可以看到，它不适用于不同的标准

这是一个相对较短的 js 脚本来解析匹配的 html：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

$(document).ready(function(){
$(".sorting > div a").click(function(){
$(this).siblings().removeClass('selected');
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
$(this).addClass('selected');
}

$('.results .basket').each(function(){
var basketKeywords = $(this).attr('data-keywords');
var match = true;
$(".sorting > div a.selected").each(function(){
if (!basketKeywords.match($(this).attr('data-keyword'))){
match = false;
}
});

if (match){
$(this).addClass('showMe').removeClass('hideMe');
} else {
$(this).addClass('hideMe').removeClass('showMe');
}
});

positionThumbnails();
});
});

function positionThumbnails(){
$('.basket.hideMe').animate({opacity:0},500,function(){
$(this).css({'display':'none'});
});
$('.basket.showMe').each(function(index){
$(this).css('display','block').animate({opacity:1},500)
});
}

它有效，但我需要以某种方式在乞讨时将类 showMe 添加到所有结果中。

用下面提到的脚本替换您的整个 javascript/Jquery 脚本，并根据您的要求检查更改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

$(document).ready(function(){
$('a.sortLink1').on('click',function(event){
event.preventDefault(event);
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
var SelectedAry = $(".selected");
var flag = false;
if(SelectedAry != undefined && SelectedAry.length == 0)
flag = true
sortResult(flag);
}
else{
$('a.sortLink1').removeClass('selected');
$(this).addClass('selected');
var SelectedAry = $(".selected");

var flag = false;
if(SelectedAry != undefined && SelectedAry.length == 0)
flag = true
sortResult(flag);

}}
);
$('a.sortLink2').on('click',function(event){
event.preventDefault(event);
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
var SelectedAry = $(".selected");
var flag = false;
if(SelectedAry != undefined && SelectedAry.length == 0)
flag = true
sortResult(flag);
}
else{
$('a.sortLink2').removeClass('selected');
$(this).addClass('selected');
var SelectedAry = $(".selected");
var flag = false;
if(SelectedAry != undefined && SelectedAry.length == 0)
flag = true
sortResult(flag);

}}
);

$('a.sortLink3').on('click',function(event){
event.preventDefault(event);
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
var SelectedAry = $(".selected");
var flag = false;
if(SelectedAry != undefined && SelectedAry.length == 0)
flag = true
sortResult(flag);
}
else{
$('a.sortLink3').removeClass('selected');
$(this).addClass('selected');
var flag = false;
if(SelectedAry != undefined && SelectedAry.length == 0)
flag = true
sortResult(flag);

}}
);

$('a.sortLink4').on('click',function(event){
event.preventDefault(event);
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
var SelectedAry = $(".selected");
var flag = false;
if(SelectedAry != undefined && SelectedAry.length == 0)
flag = true
sortResult(flag);
}
else{
$('a.sortLink4').removeClass('selected');
$(this).addClass('selected');
var SelectedAry = $(".selected");
var flag = false;
if(SelectedAry != undefined && SelectedAry.length == 0)
flag = true
sortResult(flag);

}}
);
$('a.sortLink5').on('click',function(event){
event.preventDefault(event);
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
var SelectedAry = $(".selected");
var flag = false;
if(SelectedAry != undefined && SelectedAry.length == 0)
flag = true
sortResult(flag);
}
else{
$('a.sortLink5').removeClass('selected');
$(this).addClass('selected');
var SelectedAry = $(".selected");
var flag = false;
if(SelectedAry != undefined && SelectedAry.length == 0)
flag = true
sortResult(flag);

}}
);

$('.basket').addClass('showMe');
positionThumbnails();

});

function sortResult (flag){

$('.results .basket').each(function(){
var thumbnailKeywords = $(this).attr('data-keywords');
if(flag){
$(this).addClass('showMe').removeClass('hideMe');
}else{
var mymatch = false;
var SelectedAry = $(".selected");
SelectedAry.each(function(){
var newKeyword = $(this).attr("data-keyword");

var test_regexp = new RegExp("\\\\b"+newKeyword+"\\\\b");
mymatch = thumbnailKeywords.match(test_regexp);
if(!mymatch)
return false;
});

if(mymatch){
$(this).addClass('showMe').removeClass('hideMe');
}else{
$(this).addClass('hideMe').removeClass('showMe');
}
}
});
positionThumbnails();
}

function positionThumbnails(){
$('.basket.hideMe').animate({opacity:0},500,function(){
$(this).css({'display':'none'});
});
$('.basket.showMe').each(function(index){
$(this).css('display','block').animate({opacity:1},500)
});

}

请检查您的要求并比较您的脚本。为了知识
jsfiddle 请访问"http://jsfiddle.net/LSMxC/32/"。请检查您的最后。

有关基于多选的Javascript/jquery过滤结果的更多相关文章

jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2
rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送
ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2
是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？最佳答案您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s
报告回顾丨模型进化狂飙，DetectGPT能否识别最新模型生成结果？ - 2
导读语言模型给我们的生产生活带来了极大便利，但同时不少人也利用他们从事作弊工作。如何规避这些难辨真伪的文字所产生的负面影响也成为一大难题。在3月9日智源Live第33期活动「DetectGPT：判断文本是否为机器生成的工具」中，主讲人Eric为我们讲解了DetectGPT工作背后的思路——一种基于概率曲率检测的用于检测模型生成文本的工具，它可以帮助我们更好地分辨文章的来源和可信度，对保护信息真实、防止欺诈等方面具有重要意义。本次报告主要围绕其功能，实现和效果等展开。（文末点击“阅读原文”，查看活动回放。）Ericmitchell斯坦福大学计算机系四年级博士生，由ChelseaFinn和Chri
叮咚买菜基于 Apache Doris 统一 OLAP 引擎的应用实践 - 2
导读：随着叮咚买菜业务的发展，不同的业务场景对数据分析提出了不同的需求，他们希望引入一款实时OLAP数据库，构建一个灵活的多维实时查询和分析的平台，统一数据的接入和查询方案，解决各业务线对数据高效实时查询和精细化运营的需求。经过调研选型，最终引入ApacheDoris作为最终的OLAP分析引擎，Doris作为核心的OLAP引擎支持复杂地分析操作、提供多维的数据视图，在叮咚买菜数十个业务场景中广泛应用。作者｜叮咚买菜资深数据工程师韩青叮咚买菜创立于2017年5月，是一家专注美好食物的创业公司。叮咚买菜专注吃的事业，为满足更多人“想吃什么”而努力，通过美好食材的供应、美好滋味的开发以及美食品牌的孵
基于C#实现简易绘图工具【100010177】 - 2
C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.
kvm虚拟机安装centos7基于ubuntu20.04系统 - 2
需求：要创建虚拟机，就需要给他提供一个虚拟的磁盘，我们就在/opt目录下创建一个10G大小的raw格式的虚拟磁盘CentOS-7-x86_64.raw命令格式：qemu-imgcreate-f磁盘格式磁盘名称磁盘大小qemu-imgcreate-f磁盘格式-o?1.创建磁盘qemu-imgcreate-fraw/opt/CentOS-7-x86_64.raw10G执行效果#ls/opt/CentOS-7-x86_64.raw2.安装虚拟机使用virt-install命令，基于我们提供的系统镜像和虚拟磁盘来创建一个虚拟机，另外在创建虚拟机之前，提前打开vnc客户端，在创建虚拟机的时候，通过vnc
ruby-on-rails - 在 Controller 中干净地处理多个过滤器(参数) - 2
我有一个名为Post的类，我需要能够适应以下场景:如果用户选择了一个类别，则只显示该类别的帖子如果用户选择了一种类型，则只显示该类型的帖子如果用户选择了一个类别和类型，则只显示该类别中该类型的帖子如果用户没有选择任何内容，则显示所有帖子我想知道我的Controller是否不可避免地会因大量条件语句而显得粗糙...这是我解决此问题的错误方法-有谁知道我如何才能做到这一点？classPostsController 最佳答案您最好遵循“胖模型，瘦Controller”的惯例，这意味着您应该将这种逻辑放在模型本身中。Post类应该能够报告
ruby-on-rails - 如何处理 Grape 中特定操作的过滤器之前？ - 2
我正在我的Rails项目中安装Grape以构建RESTfulAPI。现在一些端点的操作需要身份验证，而另一些则不需要身份验证。例如，我有users端点，看起来像这样:moduleBackendmoduleV1classUsers现在如您所见，除了password/forget之外的所有操作都需要用户登录/验证。创建一个新的端点也没有意义，比如passwords并且只是删除password/forget从逻辑上讲，这个端点应该与用户资源。问题是Grapebefore过滤器没有像except,only这样的选项，我可以在其中说对某些操作应用过滤器。您通常如何干净利落地处理这种情况？
jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2
我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

基于多选的Javascript/jquery过滤结果

Javascript/jquery filter results based on multiple selections

有关基于多选的Javascript/jquery过滤结果的更多相关文章

随机推荐