0

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

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

我正在使用 jQ 1.7.1 和同位素，两个缩小版本以及 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>

谢谢。

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

jQuery Isotope 文档中的这个页面解释了如何进行组合过滤器 ，并且在 GitHub 问题中讨论了关于组合（AND 和 OR）过滤器的讨论。

于 2012-05-30T17:02:24.177 回答