使用j-查询同位素的组合过滤器和二级过滤器

Question

我想基于他们所做的工作和该工作和位置内的类型的子类别来过滤具有同位素的人员列表。基于顶级类别，我希望用户能够使用辅助类别进行过滤。类别可能如下所示：

顶级类别

Job category: Any, Office worker, Laborer, Healthcare worker

Location: Any, West, East, North

中学课程类别：

Office worker job types: Any, Secretary, Midlevel, Executive

Laborer job types: Any, Construction, Demolition, Transportation

Healthcare worker job types: Any, Doctor, Nurse, Admin

所以，有人可能被标记为：办公室工作人员，秘书，West 或者：劳动者，拆迁，北部

以下是人员和过滤器的一些示例代码：

<div class="option-combo jobtype">
        <ul class="filter option-set clearfix " data-filter-group="jobcategory"> 
                <li><a id="jobtype" href="#filter-jobcategory-any" data-filter-value="" class="selected anyjob">any</a></li>
                <li><a id="jobtype" href="#filter-jobcategory-officeworker" data-filter-value=".officeworker" class="">Office Worker</a></li>
                <li><a id="jobtype" href="#filter-jobcategory-laborer" data-filter-value=".laborer" class="">Laborer</a></li>
                <li><a id="jobtype" href="#filter-jobcategory-healthcareworker" data-filter-value=".healthcareworker" class="">Laborer</a></li>
</div>  
<div class="option-combo officetype">
        <ul class="filter option-set clearfix " data-filter-group="officetype"> 
                <li><a id="officetype" href="#filter-officetype-any" data-filter-value="" class="selected office">any</a></li>
                <li><a id="officetype" href="#filter-officetype-secretary" data-filter-value=".secretary" class="">Secretary</a></li>
                <li><a id="officetype" href="#filter-officetype-midlevel" data-filter-value=".midlevel" class="">Midlevel</a></li>
                <li><a id="officetype" href="#filter-officetype-executive" data-filter-value=".executive" class="">Executive</a></li>
</div>
<div class="option-combo laborertype">
        <ul class="filter option-set clearfix " data-filter-group="laborertype"> 
                <li><a id="laborertype" href="#filter-laborertype-any" data-filter-value="" class="selected laborer">any</a></li>
                <li><a id="laborertype" href="#filter-laborertype-construction" data-filter-value=".construction" class="">construction</a></li>
                <li><a id="laborertype" href="#filter-laborertype-demolition" data-filter-value=".demolition" class="">demolition</a></li>
                <li><a id="laborertype" href="#filter-laborertype-transportation" data-filter-value=".transportation" class="">transportation</a><li>
</div>
<div class="option-combo healthcaretype">
        <ul class="filter option-set clearfix " data-filter-group="healthcaretype"> 
                <li><a id="healthcaretype" href="#filter-healthcaretype-any" data-filter-value="" class="selected healthcare">any</a></li>
                <li><a id="healthcaretype" href="#filter-healthcaretype-doctor" data-filter-value=".doctor" class="">doctor</a></li>
                <li><a id="healthcaretype" href="#filter-healthcaretype-nurse" data-filter-value=".nurse" class="">nurse</a></li>
                <li><a id="healthcaretype" href="#filter-healthcaretype-admin" data-filter-value=".admin" class="">admin</a></li>
</div>




<div class="option-combo location">
        <ul class="filter option-set clearfix " data-filter-group="location"> 
                <li><a id="jobtype" href="#filter-location-any" data-filter-value="" class="selected any">any</a></li>
                <li><a id="jobtype" href="#filter-location-west" data-filter-value=".west" class="">West</a></li>
                <li><a id="jobtype" href="#filter-location-east" data-filter-value=".east" class="">Midlevel</a></li>
                <li><a id="jobtype" href="#filter-location-north" data-filter-value=".north" class="">Executive</a></li>
</div>


<div id="peoplecontainer">
    <div class="person officeworker secretary west">
        John Smith
    </div>
    <div class="person laborer construction north">
        Anne Brown
    </div>
    <div class="person healthcareworker doctor east">
        Anne Brown
    </div>
</div>

我希望的功能是顶级作业类别（任何，办公室，人工，医疗保健）和位置始终可见，但次要作业类型过滤器最初不可见。当用户点击“办公室工作人员”时，同位素应排序为仅显示办公室工作人员，并且出现相应的与办公室相关的辅助过滤器（任何，秘书，中级，执行）。然后，用户可以使用那些辅助作业类型进一步过滤。我可以让这个工作。

但是当用户点击不同的顶级作业类别时会出现问题。所以，假设用户点击了“办公室工作人员”和“秘书”。现在，用户想要看到所有的劳动者。当用户单击“劳动者”时，辅助办公室作业类型过滤器“秘书”仍处于活动状态，因此用户看不到任何结果。我想要发生的是办公室工作类型过滤器失去过滤（通过变为非活动或默认为“任何”），以便显示“劳动者”工作类别中的所有人。然后，用户可以按第二级劳动者作业类型进行过滤。

这是我目前正在使用的同位素jquery。

<script>
    $(function(){
        var $filtercontainer = $('#peoplecontainer'),
        filters = {};

        $filtercontainer.isotope({
            itemSelector : '.person',
            masonry: {
                columnWidth: 80
            }
        });

        // filter buttons
        $('.filter a').click(function(){
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
            return;
        }

        var $optionSet = $this.parents('.option-set');
        // change selected class
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');

        if($('.officeworker').hasClass('selected')){
            $('#officetype').show();
            $('#laborertype').hide();
            $('#healthcaretype').hide();

        }
        else if($('.laborer').hasClass('selected')){
            $('#officetype').hide();
            $('#laborertype').show();
            $('#healthcaretype').hide();
        }
        else if($('.healthcareworker').hasClass('selected')){
            $('#officetype').hide();
            $('#laborertype').hide();
            $('#healthcaretype').show();
        }


        // store filter value in object

        var group = $optionSet.attr('data-filter-group');
        filters[ group ] = $this.attr('data-filter-value');
        // convert object into array
        var isoFilters = [];
        for ( var prop in filters ) {
            isoFilters.push( filters[ prop ] )
        }
        var selector = isoFilters.join('');
        $filtercontainer.isotope({ filter: selector });

        return false;
        });

    });

</script>

这样就完成了组合过滤，并且只有在选择了相应的顶级作业类别时才会显示第二级作业类型。但是，如果在选择了二级过滤器后选择了一个新的顶级作业类别，则它不会恢复为二级别的“任何”过滤，并保持对错误的顶级作业类别的过滤，因此在同位素过滤中没有显示结果。我还尝试将所有二级作业类型放在一个排序集中。这使得它只有一个“任何”，如果用户点击它，将显示适合所选顶级作业类别的所有结果。但它不会自动恢复为“任何”，因此它比次级滤波器分为三组时要好得多。

如何以我想要的方式完成这项工作？