Question

我已经在使用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>

感谢。

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。

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

1 个答案: