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

将filter应用于要在启动时显示的类：

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

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

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

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

1 个答案: