0

私はすでにscrollToを使用していますが、これがそれよりも優先される場合は、それを破棄するか、別のものに置き換えることができます（トップナビゲーションからフッターセクションにジャンプするだけです）。

目標は、同位体フィルタリングを使用してアイテムのリストをフィルタリングし、できれば上記の選択したフィルターリンクを強調表示することです（ただし、同位体ビットが基本的な形式で機能するようになったら、それが機能することは間違いありませんが、それを一度に実現するために助けを断らないでください）。

私はjQ1.7.1とアイソトープを使用しています。両方とも縮小版とscrollTo1.4.2縮小版です。あなたはここで完全なビットを見ることができます：http：//beta.wildcatbelts.com/wrestling-belt-gallery-ren.php

私のjQ：

$(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;
});

});

でリードする：

$(document).ready(function(){

...（私がよく見ることに慣れている）別のページ（ホームページだけ）の別の（古い、放棄された）プラグインが失敗すると機能しません。両方を機能させるために必要なページの各バージョンを喜んで使用します。

私のマークアップ：

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

ありがとう。

4

1 に答える 1

1

フィルタが機能しないのはitemSelector、一致するものが見つからないためです。セレクターは、要素.beltsを既に検索しているとおりである必要があります。$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;
  });
});

#filters a.selectedJavascriptで追加したように、フィルタリングセクションで選択したリンクのスタイルを設定するクラスを作成できます。

jQuery Isotopeドキュメントのこのページでは、組み合わせフィルターの実行方法について説明しています。 また、GitHubの問題で、組み合わせ（ANDおよびOR）フィルターの実行について説明しています。

于 2012-05-30T17:02:24.177 に答える