私は、同位体を持つ人々のリストを、彼らがしている仕事と、その仕事と場所内のタイプのサブカテゴリの両方に基づいてフィルタリングしたいと考えています. トップレベルのカテゴリに基づいて、ユーザーがセカンダリ カテゴリを使用してフィルタリングできるようにしたいと考えています。カテゴリは次のようになります。
トップレベルのカテゴリ
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>
私が望む機能は、最上位の職種 (任意、オフィス、労働、医療) と場所が常に表示されることですが、二次的な職種のフィルターは最初は表示されません。ユーザーが「オフィス ワーカー」をクリックすると、アイソトープはオフィス ワーカーのみを表示するように並べ替えられ、適切なオフィス関連の二次フィルター (任意、秘書、中間レベル、重役) が表示されます。その後、ユーザーはこれらの二次ジョブ タイプを使用してさらにフィルタリングできます。これを機能させることができます。
しかし、ユーザーが別のトップレベルのジョブ カテゴリをクリックすると、問題が発生します。たとえば、ユーザーが「オフィス ワーカー」と「秘書」をクリックしたとします。ここで、ユーザーはすべての労働者を見たいと思っています。ユーザーが「労働者」をクリックすると、セカンダリ オフィスのジョブ タイプ フィルター「秘書」がまだアクティブであるため、ユーザーには結果が表示されません。私が実現したいのは、「労働者」の職種のすべての人が表示されるように、オフィスの職種フィルターがフィルタリングを失うことです (非アクティブになるか、「任意」にデフォルト設定されます)。次に、ユーザーは第 2 レベルの労働者のジョブ タイプでフィルター処理できます。
これが私が現在使用しているアイソトープ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>
これにより、組み合わせフィルタリングが実行され、対応するトップレベルのジョブ カテゴリが選択された場合にのみ、第 2 レベルのジョブ タイプが表示されます。しかし、二次レベルのフィルターが選択された後に新しいトップレベルのジョブ カテゴリが選択されると、二次レベルの「任意の」フィルター処理に戻らず、間違ったトップレベルのジョブ カテゴリのフィルター処理が維持されます。そのため、同位体フィルタリングに結果が表示されません。また、すべての二次レベルのジョブ タイプを 1 つの並べ替えセットに入れてみました。これにより、「任意」が 1 つだけになり、ユーザーがそれをクリックすると、選択したトップレベルの職種に適合するすべての結果が表示されます。ただし、自動的に「任意」に戻らないため、2 次レベルのフィルターが 3 つのグループに分割されている場合よりも優れているとは言えません。
これを希望どおりに機能させるにはどうすればよいですか？