[英]Javascript/jquery filter results based on multiple selections
我正在尝试寻找解决方案,该问题需要基于多个条件来优化结果。 我有多个选择标准:
用户只能从每个组中选择一个条件,例如,您可以选择苹果,但不能选择橙子或葡萄。 参见jsfiddle 。
然后,我有多个装有不同物品的篮子。
<div class="results">
<div class="basket" data-keywords="apple broccoli peanut rice cinnamon">Result1</div>
<div class="basket" data-keywords="apple tomato almond wheat pepper">Result2</div>
<div class="basket" data-keywords="orange potato peanut rice ginger">Result3</div>
<div class="basket" data-keywords="apple potato walnut corn ginger">Result4</div>
<div class="basket" data-keywords="grape broccoli peanut corn ginger">Result5</div>
</div>
但是问题在于这些结果必须基于多个标准进行完善。 例如,我选择了苹果,然后选择了番茄,因此我需要优化结果,使该用户只能看到苹果和番茄的结果。
这是我的jsfiddle 。 目前,仅根据一个条件(关键字)过滤结果,但是我需要以某种方式包括其他条件。
将您的整个javascript / Jquery脚本替换为下面提到的脚本,并根据您的要求检查更改
$(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/ ”。 请检查您的结尾。
这是一个相对简短的js脚本,用于解析html以进行匹配:
$(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)
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.