javascript - 将过滤器上的内容添加到基于同位素的站点

Question

我使用同位素创建了一个站点，但在您单击其中一个过滤器时添加项目时遇到问题。

这是我用于过滤的脚本:

<script type="text/javascript">
    // cache container
    var $container = $('#container');
    // initialize isotope
    $container.isotope({
        filter: '.front'
    });   

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

效果很好，但我在添加或取消隐藏内容时遇到问题，

我试图改编这个 http://jsfiddle.net/RRgjD/到我的代码，但我对 javascript 不是很好，并且一直摔倒在我的脸上。

下面是我正在使用的 html 示例。

<li><a href="#filter" data-filter=".identity, .menufilter">&mdash; Brand Identity</a></li>
<li><a href="#filter" data-filter=".guidelines, .menufilter">&mdash; Brand Guidelines</a></li>
<li><a href="#filter" data-filter=".photography, .menufilter">&mdash; Brand Photography</a></li>
<li><a href="#filter" data-filter=".digital, .menufilter">&mdash; Digital</a></li>


<div class="item cols-1 rows-1 identity">
    <span class="new-wrapper">
        <div class="post-thumb clearfix">
            <a title="Eternal friendship" href="#">
                <img src="images/thumbs/oxford.jpg" alt="brain" width="200" height="133"/>
            </a>
        </div>
        <a href="#"><span>
            <h2></h2> 
            <p>
                <p></p>
            </p>
        </span></a>
    </span>
</div>

任何帮助或指导都会很棒。我还研究了同位素附带的插入方法，但它超出了我的理解范围，我什至不确定从哪里开始。

提前致谢!

编辑:

这开始过滤 .front 类，但其他类的过滤不起作用:

<script type="text/javascript">

$(function() {

 var $container = $('#container'),
    $checkboxes = $('#filters a');

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

 $container.isotope({
    filter: '.front'
 });

 $checkboxes.change(function() {
    var filters = [];
    // get checked checkboxes values
    $checkboxes.click(function(){
    var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });
    return false;
    });
    // ['.red', '.blue'] -> '.red, .blue'
    filters = filters.join(', ');
    $container.isotope({
        filter: filters
    }, function($changedItems, instance) {
        instance.$allAtoms.filter('.isotope-hidden').removeClass('is-filtered');
        instance.$filteredAtoms.addClass('is-filtered');
    });
});
});
</script> 

Answer 1

在您希望在启动时显示的类上应用过滤器:

$container.isotope({
    filter: '.guidelines, .photography' 
});

此示例在启动时显示您的两个类别。 jsFiddle

其他可能破坏功能的东西是困惑的 HTML/CSS(动画、可见/隐藏元素等)