Javascript 如何筛选多个类别的产品？

目标是，我有一些产品，每个产品都属于多个类别。最初，我列出了所有产品，需要通过jQuery进行筛选。我试过下面的方法，但似乎不起作用。有人能告诉我如何才能做到这一点吗

<section class="container">
    <ul class="filters">
        <li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "hdtv,usb-30"}]}'>HD TV</a></li>
        <li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "hdtv,android-tv"}]}'>FULL-HD</a></li>
        <li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "android-tv,usb-30"}]}'>USB 3.0</a></li>
        <li><a href="" class="nav-filter" data-filters='{"filterObject": [{"items": "hdtv,full-hd"}]}'>Android</a></li>
    </ul>

    <div id="products">
        <div class="items" data-filter='hdtv,usb-30'>
            <h2>I am HDTV haing usb 3.0</h2>
        </div>

        <div class="items" data-filter='hdtv,android-tv'>
            <h2>I am HDTV but a android tv</h2>
        </div>

        <div class="items" data-filter='android-tv,usb-30'>
           <h2>I am android tv</h2>
        </div>

        <div class="items" data-filter='hdtv,full-hd'>
            <h2>I am a HDTV and full HD tv</h2>
        </div>
    </div>

</section>

---

您可以实现一个过滤器逻辑，如

var$items=$（'#products.items'）。每个（函数（）{
var值=$（this）.data（'filter'）.split（/\s*，\s*/）；
$（此）.data（'array-filters'，值）；
});
$（'.filters li:has（[data filters]）。单击（function（）{
var filters=$（this）.data（'array-filters'）；
var$selected=$items.filter（函数（）{
var值=$（this.data（'array-filters'）；
返回值。一些（函数（值）{
返回过滤器。indexOf（值）>-1；
});
});
$selected.show（）；
$items.not（$selected.hide（）；
返回false；
}).each（函数（{
var filters=$（this）.find（'a'）.data（'filters'）.filterObject[0]。items；
filters=filters.split（/\s*，\s*/）；
$（this）.data（'array-filters'，filters）；
});











我是HDTV haing usb 3.0
我是高清电视，但我是安卓电视
我是安卓电视
我是高清电视和全高清电视
您可以尝试以下方法吗

$(document).ready(function () {
    $(".nav-filter").click(function (e) {
        e.preventDefault();
        $(".items").hide();
        _ = $(this);
        var filteritem = _.data("filters");
        var item = filteritem.filterObject[0].items.split(',');
        $("#products").find("div").each(function () {

            for (var i = 0; i < item.length; i++) {
                if ($(this).data("filter").indexOf(item[i]) >= 0) {
                    $(this).show();

                }
            }

        });

    });

 });

$（文档）.ready（函数（）{
$（“.nav过滤器”）。单击（函数（e）{
e、 预防默认值（）；
$（“.items”）.hide（）；
_=美元（本）；
var filteritem=uu0.data（“过滤器”）；
var item=filteritem.filterObject[0]。items.split（'，'）；
$（“#产品”）。查找（“div”）。每个（函数（）{
对于（变量i=0；i=0）{
$（this.show（）；
}
}
});
});
});

只是一个旁注：注意这一行
\uu=$（这一行）正在强制
\uu
离开函数的本地范围。使用
var.=$（这个）
以确保您使用的是本地
指针。这不是我所期望的。例如，如果我单击HDTV，我只需要显示HDTV，并且选择了HDTV。如果我选择USB 3.0，我需要显示HDTV和USB 3.0。因为之前选择了HDTV，这不是我期望的。例如，如果我单击HDTV，我只需要显示HDTV，并且选择了HDTV。如果我选择USB 3.0，我需要显示HDTV和USB 3.0。因为之前选择了HDTV。@如果单击“HDTV”您期望的输出，然后单击“全高清”，应该是什么输出，请详细说明如果单击“HDTV”，我只需要将HDTV和HDTV显示为所选项目。如果我选择USB 3.0，我需要显示HDTV和USB 3.0。@QustionStack如果单击HD TV，我需要显示id“Products”下的什么divs，请告诉我，当我单击USB 3.0时，也需要显示同样的divs。您能检查一下吗
$(document).ready(function () {
    $(".nav-filter").click(function (e) {
        e.preventDefault();
        $(".items").hide();
        _ = $(this);
        var filteritem = _.data("filters");
        var item = filteritem.filterObject[0].items.split(',');
        $("#products").find("div").each(function () {

            for (var i = 0; i < item.length; i++) {
                if ($(this).data("filter").indexOf(item[i]) >= 0) {
                    $(this).show();

                }
            }

        });

    });

 });