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

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

// 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()。 Here's the working fiddle.

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

2 个答案: