隐藏分组的同位素元素标题

Question

使用同位素过滤，每个元素都在特定的组内。在过滤时，每个元素的组标题都叠加在另一个上面，并且我不确定在标题未被激活/选择时隐藏标题的最佳方式。

每个元素都是.person，但标题也有.sub-head个类。有没有办法将.sub-head追加到itemSelector？或者添加另一个var来过滤？

我的js代码：

//***********DIRECTORY SCRIPTS***********
var $j = jQuery.noConflict();
$j('#directory').imagesLoaded( function() {

   var $container = $j('#directory');
   filters = {};

   $container.isotope({
        itemSelector: '.person',
        layoutMode : 'fitRows'
    });

    $j('.filter .button a').click(function(){
      var $this = $j(this);

      if ( $this.hasClass('selected') ) {
        return;
      }

      var $optionSet = $this.parents('.option-set');

      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');

      var group = $optionSet.attr('data-filter-group');
      filters[ group ] = $this.attr('data-filter');

      var isoFilters = [];
      for ( var prop in filters ) {
        isoFilters.push( filters[ prop ] )
      }
      var selector = isoFilters.join('');
      $container.isotope({ filter: selector });

      return false;
    });
});

下面是一个屏幕截图，显示了＆＃39; Research Faculty＆＃39;选中并显示相应的元素。但我怎么能隐藏其他标题？

[注意：我正在使用php和WordPress查询，但认为它是一个js问题。如果需要，我可以分享完整的源代码;我不想把它全部丢弃在这里]

Answer 1

您已经选择了从标题中删除“.selected”类的元素。

var $optionSet = $this.parents('.option-set');

      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');

现在，只有当前标题有'.selected'类，所以你可以隐藏除了具有这个类的那个之外的所有选项集

$optionSet.not('.selected').hide();