Javascript 如何使用JQuery、HTML和CSS制作多类别过滤器

我制作了一个小网站来向你展示我的问题：www.brainfmedia.com

显示的公文包可以使用导航元素（全部、ui设计等）进行过滤

我想将这个“简单”过滤器更改为“多类别”过滤器

示例：我想选择“UI设计”，然后显示所有UI设计项目。然后，我想再次筛选“可用；按需”和“便宜、适中、昂贵”等标准。但我不想在结果中包含所有项目（甚至包括其他主要类别）。我现在的问题是，我一次只能过滤一个类别

我必须在HTML中更改什么。有没有更简单的方法？非常感谢你

以下是HTML文件的一部分，您可以更好地理解代码：

<div class="sorting-block">
    <ul class="sorting-nav sorting-nav-v1 text-center">
        <li class="filter" data-filter="all">All</li>
        <li class="filter" data-filter="category_1">UI Design</li>
        <li class="filter" data-filter="category_2">Wordpress</li>
        <li class="filter" data-filter="category_3">HTML5/CSS3</li>
        <li class="filter" data-filter="category_4">Bootstrap 3</li>
    </ul>

    <ul class="row sorting-grid">
        <li class="col-md-3 col-sm-6 col-xs-12 mix category_1 category_3" data-cat="1">
            <a href="#">
                <img class="img-responsive" src="assets/img/main/11.jpg" alt="">
                <span class="sorting-cover">
                    <span>Happy New Year</span>
                    <p>Anim pariatur cliche reprehenderit</p>
                </span>
            </a>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 mix category_3 category_1" data-cat="3">
            <a href="#">
                <img class="img-responsive" src="assets/img/main/12.jpg" alt="">
                <span class="sorting-cover">
                    <span>Happy New Year</span>
                    <p>Anim pariatur cliche reprehenderit</p>
                </span>
            </a>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 mix category_2 category_1" data-cat="2">
            <a href="#">
                <img class="img-responsive" src="assets/img/main/13.jpg" alt="">
                <span class="sorting-cover">
                    <span>Happy New Year</span>
                    <p>Anim pariatur cliche reprehenderit</p>
                </span>
            </a>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 mix category_3 category_4" data-cat="3">
            <a href="#">
                <img class="img-responsive" src="assets/img/main/3.jpg" alt="">
                <span class="sorting-cover">
                    <span>Happy New Year</span>
                    <p>Anim pariatur cliche reprehenderit</p>
                </span>
            </a>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 mix category_2 category_1 category_4" data-cat="2">
            <a href="#">
                <img class="img-responsive" src="assets/img/main/2.jpg" alt="">
                <span class="sorting-cover">
                    <span>Happy New Year</span>
                    <p>Anim pariatur cliche reprehenderit</p>
                </span>
            </a>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 mix category_4" data-cat="1">
            <a href="#">
                <img class="img-responsive" src="assets/img/main/6.jpg" alt="">
                <span class="sorting-cover">
                    <span>Happy New Year</span>
                    <p>Anim pariatur cliche reprehenderit</p>
                </span>
            </a>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 mix category_2 category_3  category_4" data-cat="2">
            <a href="#">
                <img class="img-responsive" src="assets/img/main/8.jpg" alt="">
                <span class="sorting-cover">
                    <span>Happy New Year</span>
                    <p>Anim pariatur cliche reprehenderit</p>
                </span>
            </a>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 mix category_1 category_2 category_3" data-cat="1">
            <a href="#">
                <img class="img-responsive" src="assets/img/main/1.jpg" alt="">
                <span class="sorting-cover">
                    <span>Happy New Year</span>
                    <p>Anim pariatur cliche reprehenderit</p>
                </span>
            </a>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 mix category_4 category_2" data-cat="1">
            <a href="#">
                <img class="img-responsive" src="assets/img/main/11.jpg" alt="">
                <span class="sorting-cover">
                    <span>Happy New Year</span>
                    <p>Anim pariatur cliche reprehenderit</p>
                </span>
            </a>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 mix category_3 category_2" data-cat="3">
            <a href="#">
                <img class="img-responsive" src="assets/img/main/12.jpg" alt="">
                <span class="sorting-cover">
                    <span>Happy New Year</span>
                    <p>Anim pariatur cliche reprehenderit</p>
                </span>
            </a>
        </li>
    </ul>

    <div class="clearfix"></div>
</div>

全部
用户界面设计
Wordpress
HTML5/CSS3
引导程序3


















数据类别1>

您使用的jQuery.mixitup脚本具有多过滤器选项。激活此选项后，可以添加其他过滤器并将其组合

 $('.sorting-grid').mixitup({multiFilter:true});

---

创建过滤器并不十分困难，但请看一下……所有的过滤器都带有动画和APIso中的许多选项吗？那么我如何自己制作过滤器呢？你有没有一个教程的链接或者更多的建议？非常感谢，我现在正在研究这个问题，但是它还没有起作用，你能给我一些关于如何修改代码的见解吗？thxupdate至mixitup的最新版本$（'.sorting grid'）.mixitup（{multiFilter:'true'，filterLogic:'和'}）；