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

Javascript/jquery filter results based on multiple selections

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

水果——苹果橙葡萄

蔬菜——番茄土豆西兰花

坚果——核桃花生杏仁

谷类——玉米小麦大米

香料——肉桂姜胡椒

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

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

1
2
3
4
5

Result1
Result2
Result3
Result4
Result5

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

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

相关讨论

用下面提到的脚本替换您的整个 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/"。请检查您的最后。