Question

我试图找到答案，这可能很简单。我想将选定的类添加到同位素的活动过滤器中。这是我的代码：

$(function(){

  var $container = $('#container');

  $container.isotope({
    itemSelector: '.item',
    masonry : {
      columnWidth : 165
    }
  });


  // filter items when filter link is clicked
  $('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
  $container.isotope({ filter: selector, animationEngine : "css" });
  return false;


  });

我的HTML是：

<ul id="filters" >
  <li><a href="#" data-filter="*" class="selected">All</a></li>
  <li><a href="#" data-filter=".Henry">Henry</a></li>
  <li><a href="#" data-filter=".William">South William</a></li>
  <li><a href="#" data-filter=".Grafton">Grafton</a></li>
  <li><a href="#" data-filter=".Talbot">Talbot</a></li>
</ul>

有人帮忙吗？谢谢戴夫

Answer 1

将您想要预选的过滤条件添加为filter: .pre-selected class

$container.isotope({
    itemSelector: '.item',
    filter: '.Grafton',
    masonry : {
        columnWidth : 165
    }
});

Answer 2

试试这个：

/ filter items when filter link is clicked
$('#filters a').click(function(){
$('#filters a.active').removeClass('active');
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector, animationEngine : "css" });
$(this).addClass('active');
return false;


});

查询同位素过滤器添加选定的CSS

2 个答案: