Question

我有一个内容列表，我想根据他们的班级名称进行过滤。当有人点击两个菜单中的一个时，应该显示该菜单项的类的内容。某些内容项有多个类，用户可以从这两个菜单中进行过滤。

我的代码存在的问题是每个菜单点击都没有重置项目列表。它会在第一次单击菜单后过滤掉剩余的项目。

提前感谢您的帮助。

＆＃13;

$(document).ready(function () {
    $('.filter li a').click(function () {
        var partnerResources = $(this).attr('class');
        $('.filter li').removeClass('active');
        $(this).parent().addClass('active');

        if (partnerResources == 'all') {
            $('#list-area').children('div').fadeIn(500);
        } else {
            $('#list-area').children('div:not(.' + partnerResources + ')').fadeOut(500);
            $('#list-area').children('div:has(.' + partnerResources + ')').fadeIn(500);
        }
        return false;
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul class="filter">
    <li class="active"><a href="#" class="all">All</a>
    </li>
    <li><a href="#" class="welcome-kit">Welcome Kit</a>
    </li>
    <li><a href="#" class="forms">Forms</a>
    </li>
</ul>
<hr />
<ul class="filter">
    <li class="active"><a href="#" class="all">All</a>
    </li>
    <li><a href="#" class="automotive">Automotive</a>
    </li>
    <li><a href="#" class="retail">Retail</a>
    </li>
</ul>
<hr />
<div id="list-area">
    <div class="welcome-kit retail">welcome retail</div>
    <div class="forms">forms</div>
    <div class="forms retail">forms retail</div>
    <div class="welcome-kit automotive">welcome autmotive</div>
    <div class="forms">forms</div>
    <div class="welcome-kit forms">welcome forms</div>
    <div class="welcome-kit automotive">welcome automotive</div>
    <div class="welcome-kit">welcome</div>
    <div class="welcome-kit forms">welcome forms</div>
    <div class="forms">forms</div>
</div>

＆＃13;

Answer 1

使用.hasClass

执行此操作

$(document).ready(function () {
    $('.filter li a').click(function () {
        var partnerResources = $(this).hasClass('all');
        $('.filter li').removeClass('active');
        $(this).parent().addClass('active');

        if (partnerResources) {
            $('#list-area').children('div').fadeIn(500);
        } else {
            $('#list-area').children('div:not(.' + partnerResources + ')').fadeOut(500);
            $('#list-area').children('div:has(.' + partnerResources + ')').fadeIn(500);
        }
        return false;
    });
});

Answer 2

你可以这样做，http://jsfiddle.net/vwwyqpvc/，

$(document).ready(function () {
    $('.filter li a').click(function () {
        var partnerResources = $(this).attr('class');
        $('.filter li').removeClass('active');
        $(this).parent().addClass('active');

        if (partnerResources == 'all') {
            $('#list-area').children('div').fadeIn(500);
        } else {
           $('#list-area').children('div').fadeIn(500).end().children('div:not(.' + partnerResources + ')').fadeOut(500).end().children('div:has(.' + partnerResources + ')').fadeIn(500);
        }
        return false;
    });
});

再次将元素添加到div中，然后在每次单击菜单时过滤掉

Answer 3

快速修复

你犯了一个简单的错误：你的div:has班级选择者没有选择你想要展示的元素！

只需用普通的类选择器替换该行：

$('#list-area').children('div.' + partnerResources).fadeIn(500);

使用JSFiddle：http://jsfiddle.net/1t1b7gzf/

说明

:has选择 children 与给定选择器匹配的元素。它不会检查当前匹配的元素。参考.has documentation：

:has()选择器

选择包含至少一个与指定选择器匹配的元素的元素。

表达式$( "div:has(p)" )与<div>匹配，如果<p>存在于其后代中的任何位置，而不仅仅是直接子项。

使用jQuery和CSS过滤内容

3 个答案:

快速修复

说明