我一直在努力弄清楚如何正确地做到这一点,但似乎无法让它发挥作用。
我想使用 jQuery 来挑选和选择我想在页面上显示的内容。我已经查看并试图找到一些脚本,有些有效但不是我想要的那样。
页面将使用复选框作为“标签”,比方说艺术、计算机、健康、视频游戏
<div class="tags">
<label><input type="checkbox" class="arts" /> Arts </label>
<label><input type="checkbox" class="computers" /> Computers </label>
<label><input type="checkbox" class="health" /> Health </label>
<label><input type="checkbox" class="video-games" /> Video Games </label>
</div>
然后在页面上会有结果,每个结果都有附加的标签。
<ul class="results">
<li class="arts computers">
Result 1
</li>
<li class="video-games">
Result 2
</li>
<li class="computers health video-games">
Result 3
</li>
<li class="arts video-games">
Result 4
</li>
</ul>
我希望能够点击艺术和视频游戏,它会显示同时具有艺术和视频游戏的所有内容,因此结果 4。或者能够只选择计算机并返回结果 1 和 3。
我想我可以做一些类似的事情
$('.tags input').click( function() {
$('.results > li').hide();
//For each one checked
$('input').is(':checked').each( function() {
//Display that result
$('.results li').hasClass($(this).attr('class')).show();
});
});
但它不起作用,它只是隐藏所有内容,但不会返回显示其余部分。我知道逻辑是完全错误的,我不认为我应该以那种方式使用每个?也许用它来获取数组中的所有类,然后显示具有这些类的 li?
有什么想法吗?
最佳答案
- 使用
.change()
复选框的事件。 -
.hasClass()
返回一个 bool 值。 - 将该信息存储在
class
以外的属性中更有意义,例如rel
或data-*
属性。
$('div.tags').delegate('input:checkbox', 'change', function()
{
var $lis = $('.results > li').hide();
$('input:checked').each(function()
{
$lis.filter('.' + $(this).attr('rel')).show();
});
}).find('input:checkbox').change();
演示:http://jsfiddle.net/mattball/d2v4Q/
@贾斯汀问
How would you change this to return only the lis that match all of the checked boxes instead of any one of them?
将每个已检查输入的内容(无论您使用的是什么属性)放入数组中,String.join('.')
它创建一个大类选择器,然后是 .filter()
<li>
s 和以前一样:
var selector = $('input:checked').map(function ()
{
return $(this).attr('rel');
}).get().join('.');
$lis.filter(selector).doWhatever();
关于php - jQuery 多复选框页面过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6526029/