Javascript 使用数据标记属性的PHP-AJAX复选框过滤器

我有

data tag=“Novel”

。当我勾选“小说”复选框时，它将显示

数据标记

属性中包含“小说”的书籍。目前，javascript/Jquery部分适用于包含单个值但不包含多个值的

数据标记。例如，我如何使两本书的
数据标签是
data tag=“虚构，小说”
和
data tag=“非虚构，小说”
分别，当我勾选“小说”复选框时，它将显示两本书，或者当我勾选“小说”复选框时，它将仅显示
数据标记
属性中包含“小说”的书

Javascript/Jquery

$(document).ready(function(){       
    $('.genre').on('change', function(){
        var genreList = [];

        $('#filterContainer :input:checked').each(function(){
            var genre = $(this).val();
            genreList.push(genre);
        });

        if(genreList.length == 0)
            $('.blItem').fadeIn();
        else {
            $('.blItem').each(function(){
                var item = $(this).attr('data-tag');
                items = item.split(',');

                if(jQuery.inArray(item,genreList) > -1)
                    $(this).fadeIn('slow');
                else
                    $(this).hide();
            });
        }   
    });
});

HTML


小说
小说
非小说类
您离解决方案不远了。您只需循环查看
项目
。首先隐藏元素，然后如果至少有一个标记匹配，则显示它


$（文档）.ready（函数（）{
$（'.green'）。在（'change'，function（）上{
var genreList=[]；
$（'#filterContainer:input:checked'）。每个（函数（）{
var genre=$（this.val（）；
推送（体裁）；
});
if（genreList.length==0）
$（'.blItem'）.fadeIn（）；
否则{
$（'.blItem'）。每个（函数（）{
var item=$（this.attr（'data-tag'）；
var items=item.split（'，'）；
$（this.hide（）；
对于（变量i=0；i-1）
$（this.fadeIn（'slow'）；
}
});
}   
});
});
.blItem{
显示：无；
}

小说
小说
非小说类
第十项与小说
项目Y和非虚构
项目虚构与非虚构
问题是您试图在另一个数组中搜索数组

使用循环

ele = this;
cond = false;
$.each(items, function(){
   cond = code || jQuery.inArray(this,genreList) != -1;
   return !cond;
})
if(cond)
    $(ele).fadeIn('slow');
else
    $(ele).hide();

什么在你的代码中不起作用？@Alessandro Niciforo它适用于
数据标记
属性中的单个值，但无法使它适用于多个值。它在某种程度上起作用，但我认为它只显示最后一条记录。即使我勾选了所有复选框，它也会显示最后一条记录。
ele = this;
cond = false;
$.each(items, function(){
   cond = code || jQuery.inArray(this,genreList) != -1;
   return !cond;
})
if(cond)
    $(ele).fadeIn('slow');
else
    $(ele).hide();