同位素过滤器-必须点击两次过滤

Question

我正在使用同位素过滤器与Fancybox画廊相结合，并修改了同位素JS，以便Fancybox仅通过过滤的图像滚动。问题是，现在要激活同位素过滤器，我必须在过滤器菜单上点击两次来初始化它。我希望有人能在我的代码中发现问题来帮助我:

下面是过滤器的JS:

DK.filter = function (){
if($('#projects').length > 0){      
    var $container = $('#projects');
    $container.imagesLoaded(function() {
        $container.isotope({
          // options
          animationEngine: 'best-available',
          itemSelector : '.item-thumbs',
          layoutMode : 'fitRows'
        });
    });

    // filter items when filter link is clicked
    var $optionSets = $('#options .option-set'),
        $optionLinks = $optionSets.find('a');
      $optionLinks.click(function(){
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
          return false;
        }
        var $optionSet = $this.parents('.option-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');

    // open filtered items only
  $('#filters a').click(function(){
          var selector = $(this).attr('data-filter');
      $('#projects').isotope({ filter: selector }, function(){
        if(selector == "*"){
         $(".fancybox").attr("data-fancybox-group", "gallery");
        } else{ 
         $(selector).find(".fancybox").attr("data-fancybox-group", selector);
        }
      });
      return false;
    });

        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
            key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[ key ] = value;
        if ( key === 'layoutMode' && typeof changeLayoutMode === 'function'         ) {
          // changes in layout modes need extra logic
          changeLayoutMode( $this, options )
        } else {
          // otherwise, apply new options
          $container.isotope( options );
        }
        return false;
    });
}
}

，下面是过滤部分开头的HTML:

       <div class="row">
        <div class="span12">
            <!-- Filter -->
            <nav id="options" class="work-nav">
                <ul id="filters" class="option-set" data-option-key="filter">
                    <li class="type-work">Type of Work</li>
                    <li><a href="#" data-filter="*" class="selected">All Projects</a></li>
                    <li><a href="#" data-filter=".red">Red</a></li>
                    <li><a href="#" data-filter=".green">Green</a></li>
                    <li><a href="#" data-filter=".blue">Blue</a></li>
                </ul>
            </nav>
            <!-- End Filter -->
        </div>
        <div class="span12">
            <div class="row">
                <section id="projects">
                    <ul id="thumbs">
                        <!-- Item Project and Filter Name --><!-- End Item Project -->
                        <!-- Item Project and Filter Name -->
                      <li class="item-thumbs span3 red">
                            <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                            <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Office" href="_include/img/work/full/red-full.jpg">
                                <span class="overlay-img"></span>
                                <span class="overlay-img-thumb font-icon-search"></span>
                            </a>
                            <!-- Thumb Image and Description -->
                            <img src="_include/img/work/thumbs/red.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                        </li>
                        <!-- End Item Project -->

开发页面也位于这里:开发页面这几天我一直在想办法解决这个问题……但我是一个新手，所以没有任何成功。任何帮助，非常感谢!欢呼。

Answer 1

昨天刚刚为一个朋友修复了这个问题。您需要将同位素一次绑定到整个容器，然后绑定到单个过滤器，因此在过滤器锚点的单击处理程序之前添加初始化行:

// bind to container
$('#projects').isotope();
// then add filters
$('#filters a').click(function(){
      var selector = $(this).attr('data-filter');
      $('#projects').isotope({ filter: selector }, function(){
        if(selector == "*"){
         $(".fancybox").attr("data-fancybox-group", "gallery");
        } else{ 
         $(selector).find(".fancybox").attr("data-fancybox-group", selector);
        }
      });
      return false;
    });

Answer 2

原来我绑定到click事件两次，并在代码末尾返回false，所以我破坏了初始化其他绑定。为了防止浏览器的默认行为，最好使用事件.preventDefault()。