4

isotope を使用してサイトを作成しましたが、フィルターの 1 つをクリックしたときにアイテムを追加するのに問題があります。

これは、フィルタリングに使用しているスクリプトです。

<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' 
});

この例は、起動時の 2 つのカテゴリを示しています。 jsフィドル

機能を台無しにする可能性があるその他のものは、HTML/CSS の乱雑さ (アニメーション、表示/非表示要素など) です。

于 2013-01-28T10:21:15.520 に答える