同位素：与 Bootstrap 下拉的组合过滤

Question

我让 Isotope 为 Wordpress 中的员工目录过滤自定义帖子类型。我正在使用 Bootstrap 下拉菜单显示三个类别设置，以按国家、行业和公司过滤员工，但希望能够在从所有三个下拉菜单中选择一个选项时组合结果。

我正在努力将选定的值合并为一个。目前，过滤器独立工作，但当您从第二个类别中进行选择时，它会覆盖在第一个类别中所做的选择。

这是我的 PHP 生成的代码，用于为我的过滤器生成下拉链接

<div id="filters"> <!-- Sorting links -->
        <div data-filter-group="company" class="dropdown directory-filters">
        <button aria-expanded="true" data-toggle="dropdown" id="dropdownMenu1" type="button" class="btn btn-default dropdown-toggle">
            Company
            <span class="caret"></span>
        </button>
        <ul aria-labelledby="dropdownMenu1" role="menu" class="dropdown-menu">
            <li role="presentation"><a class="selected" data-filter="*" href="#" tabindex="-1" role="menuitem">All</a></li>
                <li role="presentation"><a data-filter=".apac-jwt" href="#" tabindex="-1" role="menuitem">APAC JWT</a></li>
<li role="presentation"><a data-filter=".thoughtful-media-group" href="#" tabindex="-1" role="menuitem">Thoughtful Media Group</a></li>
<li role="presentation"><a data-filter=".turn" href="#" tabindex="-1" role="menuitem">Turn</a></li>
<li role="presentation"><a data-filter=".venture-consulting" href="#" tabindex="-1" role="menuitem">Venture Consulting</a></li>
        </ul>
        </div> <!-- end .dropdown -->
        <div data-filter-group="industry" class="dropdown directory-filters">
        <button aria-expanded="true" data-toggle="dropdown" id="dropdownMenu2" type="button" class="btn btn-default dropdown-toggle">
            Industry
            <span class="caret"></span>
        </button>
        <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu">
            <li role="presentation"><a class="selected" data-filter="*" href="#" tabindex="-1" role="menuitem">All</a></li>
                <li role="presentation"><a data-filter=".advertising" href="#" tabindex="-1" role="menuitem">Advertising</a></li>
<li role="presentation"><a data-filter=".marketing" href="#" tabindex="-1" role="menuitem">Marketing</a></li>
<li role="presentation"><a data-filter=".media" href="#" tabindex="-1" role="menuitem">Media</a></li>
        </ul>
        </div> <!-- end .dropdown -->
        <div data-filter-group="country" class="dropdown directory-filters">
        <button aria-expanded="true" data-toggle="dropdown" id="dropdownMenu3" type="button" class="btn btn-default dropdown-toggle">
            Country
            <span class="caret"></span>
        </button>
        <ul aria-labelledby="dropdownMenu3" role="menu" class="dropdown-menu">
            <li role="presentation"><a class="selected" data-filter="*" href="#" tabindex="-1" role="menuitem">All</a></li>
                <li role="presentation"><a data-filter=".asia" href="#" tabindex="-1" role="menuitem">Asia</a></li>
<li role="presentation"><a data-filter=".europe" href="#" tabindex="-1" role="menuitem">Europe</a></li>
<li role="presentation"><a data-filter=".north-america" href="#" tabindex="-1" role="menuitem">North America</a></li>
        </ul>
        </div> <!-- end .dropdown -->
    </div>

这是我正在运行的 js。

var $container = $('#isotope-list'); //The ID for the list with all the blog posts
$container.isotope({ //Isotope options, 'item' matches the class in the PHP
    itemSelector : '.item', 
    layoutMode : 'fitRows'
});

//Add the class selected to the item that is clicked, and remove from the others
var $optionSets = $('#filters'),
$optionLinks = $optionSets.find('a');

$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
  return false;
}
var $optionSet = $this.parents('#filters');
$optionSets.find('.selected').removeClass('selected');
$this.addClass('selected');

//When an item is clicked, sort the items.
 var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });

return false;
});

// store filter for each group
var filters = {};

$demo.on( 'click', '.button', function() {
  var $this = $(this);
  // get group key
  var $buttonGroup = $this.parents('.directory-filters');
  var filterGroup = $buttonGroup.attr('data-filter-group');
  // set filter for group
  filters[ filterGroup ] = $this.attr('data-filter');
  // combine filters
  var filterValue = '';
  for ( var prop in filters ) {
    filterValue += filters[ prop ];
  }
  // set filter for Isotope
  $container.isotope({ filter: filterValue });
});

我通读了关于 SO 的 this 文章，但仍然不知道我缺少什么。

Answer 1

遇到了你的问题，我不确定这是否有帮助，但我发现有人做的这个 jsfiddle 似乎符合你想要做的事情：

http://jsfiddle.net/SdUQ5/

    $(function() {
    var $container = $('#container'),
        $select = $('div#filterGroup select');
    filters = {};

    $container.isotope({
        itemSelector: '.item'
    });
        $select.change(function() {
        var $this = $(this);

        var $optionSet = $this;
        var group = $optionSet.attr('data-filter-group');
    filters[group] = $this.find('option:selected').attr('data-filter-value');

        var isoFilters = [];
        for (var prop in filters) {
            isoFilters.push(filters[prop])
        }
        var selector = isoFilters.join('');

        $container.isotope({
            filter: selector
        });

        return false;
    });

});