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;
    });

});

同位素：组合过滤与引导下拉

1 个答案: