4

我使用同位素创建了一个站点，当您单击其中一个过滤器时，我无法添加项目。

这是我用于过滤的脚本：

<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>
4

1 回答 1

0

应用filter您希望在启动时显示的类：

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

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

其他可能破坏功能的东西是混乱的 HTML/CSS（动画、可见/隐藏元素等）

于 2013-01-28T10:21:15.520 回答