jquery/isotope |

Question

私は既にscrollToを使用していますが、これは、これが（それはちょうど上のナビゲーションからフッタセクションにジャンプするために）それを越える場合には、何か他のものによって廃止または置き換えられます。

目標は、アイソトープフィルタリングを使用してフィルタのリストを作成し、上で選択したフィルタリンクを強調表示することです（基本的に機能するアイソトープビットを取得すると、一度に起こるすべての援助を断ることはありません）。

私は、jQ 1.7.1とisotopeを使用しています。両方の縮小版とscrollTo 1.4.2を縮小しました。あなたはここでフルビットを見ることができます：http://beta.wildcatbelts.com/wrestling-belt-gallery-ren.php

私jQの「doesnの（私はより頻繁に見ることに慣れている）

$(document).ready(function(){ 

...：

$(window).load(function(){ 

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

$container.isotope({ 
    itemSelector : 'ul#blist > li' 
}); 


$('#ncont a').click(function(){ 
    $.scrollTo('#fcont', 1200, {axis:'y'}); 
}); 

$('#filters a').click(function(){ 
    var selector = $(this).attr('data-filter'); 
    $container.isotope({ filter: selector }); 
    return false; 
}); 

}); 

はでリード別のページ（ホームページだけ）に別の（古い、放棄された）プラグインとして動作しても失敗します。私はうまくそれらの両方を機能させるために必要なページ上の各バージョンを使用します。

私のマークアップ：

<ul id="filters" class="option-set" data-option-key="filter"> 
    <li><a href="#" data-filter="*" class="selected">Show All</a></li> 
    <li><a href="#" data-filter=".P5">5 Plates</a></li> 
    <li><a href="#" data-filter=".P3">3 Plates</a></li> 
    [ * several more filters] 
    </ul> 

    <ul id="blist"> 
    <li class="belts P5"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    <li class="belts P5"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    <li class="belts P5"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    <li class="belts P0"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    <li class="belts P5"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    <li class="belts P3"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    <li class="belts P5"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    <li class="belts P5"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    <li class="belts P0"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    <li class="belts P0"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    <li class="belts P5"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    <li class="belts P3"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li> 
    [ * many, many more ] 
    </ul> 

感謝。

Answer 1

itemSelectorが一致するものを見つけることができないため、フィルタが機能していません。セレクタはである必要があります。既に$container要素を探しています。ここで

が更新Javascriptを（私はscrollTo部分を無視してきました）です：

$(function(){ 

    // set up jquery isotope 
    var $container = $('#blist'); 

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

    $('#filters a').click(function(){ 

    // manage classes for selected/clicked on links 
    if ($(this).hasClass('selected')) { 
     $(this).removeClass('selected'); 
    } else { 
     $(this).addClass('selected');   
    } 

    // get the current selection and apply the filter 
    var selector = $(this).attr('data-filter'); 
    $container.isotope({ filter: selector }); 
    return false; 
    }); 
}); 

私はそのためにJavaScriptで追加したとしてあなたはあなたのフィルタリング部のいずれかの選択したリンクのスタイルを#filters a.selectedクラスを作成することができます。

jQuery同位体文書のこのページには、combination filtersの操作方法が説明されています。combination (AND and OR) filtersに関するGitHubの問題が議論されています。