jquery过滤列表选择
问题描述:
我已经完成了这个tutorial关于'创建一个带有jQuery'可过滤的“Portfolio”来自nettuts +,并且想要稍微微调一下。jquery过滤列表选择
我想不是点击顶部的导航栏,而是根据点击的内容点击每个类别的过滤器,我想点击一个'设计',如果点击另一个'CMS',他们会显示这两个类别的项目。再次单击时会关闭该过滤器并显示所选内容。
换句话说,我希望它显示我选择的内容,然后通过再次单击该类别取消选择。
下面是我使用的JS文件:
$(document).ready(function() {
$('ul#filter a').click(function() {
$(this).css('outline','none');
$('ul#filter .current').removeClass('current');
$(this).parent().addClass('current');
var filterVal = $(this).text().toLowerCase().replace(' ','-');
if(filterVal == 'all') {
$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul#portfolio li').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
});
任何帮助,在此将是巨大的。谢谢。
答
尝试维护一组切换的元素。我无法测试这个,但我认为它很接近。
编辑:现在经过测试和工作。
$(document).ready(function() {
$('ul#filter a').click(function() {
$(this).toggleClass('toggled_filter').parent().toggleClass('current'); // toggle a class for its state
$(this).css('outline','none');
var filterValList = [];
$('.toggled_filter').each(function(){
// add each text item to the list
filterValList.push($(this).text().toLowerCase().replace(' ','-'));
});
if($.inArray('all', filterValList) != -1 || filterValList.length === 0) {
$('ul#filter li:first').addClass('current');
$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul#filter li:first').removeClass('current');
$('ul#portfolio li').each(function() {
var classes = $(this).attr('class').split(/\s+/);
// go through each of the classes on each element
// and hide them if they aren't toggled on
var match_found = false;
for(var i in classes){
if($.inArray(classes[i], filterValList) != -1) {
match_found = true;
}
}
// check and see if anything matched
if(!match_found){
$(this).fadeOut('normal').addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
});
尝试了上面的脚本,但似乎是做了与第一个相同的事情。 – Spyderfusion02 2009-10-21 20:24:55
我能够获得演示的源代码并尝试解决问题。如果您有任何问题,请告诉我。 – 2009-10-21 21:00:57
尝试了新的脚本,但只允许我一次选择一个类别。 – Spyderfusion02 2009-10-21 21:32:46