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

Question

我已经在使用 scrollTo，但是如果它胜过它，它可以被废弃或替换为其他东西（它只是从顶部导航跳到页脚部分）。

目标是使用同位素过滤来过滤项目列表，并最好突出显示上面选定的过滤器链接（尽管我相当肯定，一旦我让同位素位以基本形式运行，我就会让它工作，但不会拒绝任何让这一切立即发生的帮助）。

我正在使用 jQ 1.7.1 和 isotope，两个缩小版本以及 scrollTo 1.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>

谢谢。

Answer 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.selected 类来设置过滤部分中任何选定链接的样式，正如我在 Javascript 中添加的那样。

jQuery Isotope 文档中的此页面解释了如何执行 combination filters，并且在 GitHub 问题中讨论了关于执行 combination (AND and OR) filters。