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

Question

我正在使用同位素过滤器与 Fancybox 库相结合，并修改了 Isotope 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 -->

开发页面也位于此处:development page我已经尝试解决这个问题好几天了......但我完全是新手，所以没有取得任何成功。非常感谢任何帮助!干杯。

Answer 1

昨天刚刚为 friend 解决了这个问题。您需要将同位素绑定(bind)到整个容器，然后绑定(bind)到单个过滤器，因此在过滤器 anchor 的点击处理程序之前添加初始化行:

// 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;
    });