我一直在试图弄清楚如何正确地做到这一点,似乎无法让它发挥作用.
我想使用jQuery从本质上挑选我想要在页面上显示的内容.我看了,试图找到一些脚本,某种有效,但不是我想要的.
该页面将使用复选框作为“标签”,让我们说艺术,电脑,健康,视频游戏
然后在页面上会有结果,每个结果都附有标签.
Result 1
Result 2
Result 3
Result 4
我希望能够点击艺术和视频游戏,它将显示包含艺术和视频游戏的所有内容,因此结果为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()返回一个布尔值.
>将该信息存储为除类之外的属性(例如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();
@Justin问道
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,mysql,tags,filter
来源: https://codeday.me/bug/20190723/1515744.html