Jquery plugins jquery/同位素|基本实施问题

我已经在使用scrollTo了，但是如果它超过了scrollTo，它可以被废弃或者被其他东西取代（只是从顶部导航跳到页脚部分）

目标是使用同位素过滤对项目列表进行过滤，最好突出显示上面所选的过滤链接（尽管我相当确定，一旦同位素位以基本形式运行，我会让它工作，但不会拒绝任何帮助，让它一下子发生）

我正在使用JQ1.7.1和同位素，这两个版本都是缩小版，也都是1.4.2缩小版。您可以在此处看到完整位：

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

[*还有几个过滤器]














[*很多，更多]

---

谢谢。

您的筛选器不工作是因为

项目选择器

找不到任何匹配项。选择器应该是

.beets

，因为它已经在

$container

元素中查找了

下面是更新后的Javascript（我忽略了

滚动到
部分）：

您可以创建一个
#filters a.selected
类来设置筛选部分中任何选定链接的样式，正如我在Javascript中为此添加的那样

jQuery同位素文档中的这一页解释了如何做，并且在GitHub中讨论了如何做

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