jQuery同位素过滤不隐藏项目答案

【问题标题】：jQuery isotope filtering without hiding itemsjQuery同位素过滤不隐藏项目
【发布时间】：2013-09-30 20:31:59
【问题描述】：

我正在尝试在我正在构建的网站上使用 jQuery 同位素插件 (http://isotope.metafizzy.co)。从本质上讲，我想做的是过滤我设法做的结果。但是，当我过滤结果时，我不希望其他结果消失，我只希望过滤选项出现在前面。

我已经为此挠头好几个小时了。这是我的 jQuery：

$(function(){

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

  $container.isotope({
    itemSelector : '.blank'
  });


  var $optionSets = $('#options .option-set'),
      $optionLinks = $optionSets.find('a');

  $optionLinks.click(function(){
    var $this = $(this);

    if ( $this.hasClass('selected') ) {
      return false;
    }
    var $optionSet = $this.parents('.option-set');
    $optionSet.find('.selected').removeClass('selected');
    $this.addClass('selected');

    var options = {},
        key = $optionSet.attr('data-option-key'),
        value = $this.attr('data-option-value');

    value = value === 'false' ? false : value;
    options[ key ] = value;
    if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {

      changeLayoutMode( $this, options )
    } else {

      $container.isotope( options );
    }

    return false;
  });    
});

和我的（简化的）html：

<section id="options" class="clearfix">
<ul id="filters" class="option-set clearfix" data-option-key="filter">
    <li><a href="#filter" data-option-value="*" class="selected">show all</a></li>
    <li><a href="#filter" data-option-value=".christmas">Christmas</a></li>
    <li><a href="#filter" data-option-value=".birthday">Birthday</a></li>
    <li><a href="#filter" data-option-value=".thank-you">Thank You</a></li>
  </ul>

<div id="cards">
<div class="blank christmas"></div>
<div class="blank christmas"></div>
<div class="blank christmas"></div>
<div class="blank christmas"></div>
<div class="blank birthday"></div>
<div class="blank birthday"></div>
<div class="blank birthday"></div>
<div class="blank thank-you"></div>
<div class="blank thank-you"></div>

和 JSfiddle 上的链接（虽然动画似乎不起作用 - 但它在我的网站上有效，所以没有问题）：http://jsfiddle.net/Yvv5x/3/

任何帮助将不胜感激。

【问题讨论】：

与问题无关，但有一个非常棒的插件可用于创建完全相同的动画效果。 Check this out.

标签： jquery html filtering jquery-isotope

【解决方案1】：

这是工作的fiddle。

您实际上不需要过滤，但需要排序。因此我创建了三种不同的排序情况（圣诞节、生日和谢谢），每个项目都有对应的 data-* 属性（最终你可以通过代码设置这个属性）。

另外，你在打电话

$container.isotope({
    itemSelector : '.blank'
});

一开始，没有所有需要的选项。

【讨论】：