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

Question

我做了一个小网站来向您展示我的问题:www.brainfmedia.com

可以使用导航元素(所有、ui 设计、...)过滤显示的投资组合

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

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

我必须在 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>

Answer 1

您使用的 jQuery.mixitup 脚本有一个 multiFilter 选项。当您激活它时，您可以添加额外的过滤器并将它们组合起来。

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