2

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

顶级类别

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

因此，某人可能会被标记为：办公室工作人员、秘书、西部 或：劳工、拆迁、北部

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

<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>

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

我怎样才能按照我想要的方式进行这项工作？

4

0 回答 0