javascript - jQuery - 同一页面上的多个图像过滤器

Question

我有 2 个部分，每个部分都有一个图像过滤器，但是当我按下一个按钮来过滤图像时，比方说过滤器 2，它也会隐藏过滤器 1 中的所有图像。 我正在使用:data-filter=".categoryofimages"

可以直接在网站上看到问题:

nimvoker.com

“成就”部分是第一个过滤器，“艺术与设计技能”是第二个过滤器。

一些文件路径由于格式(jpg、png 等)的原因不正确，但它仍然显示“缺少图像”符号，因此对于解决问题来说应该无关紧要。

两个过滤器必须独立工作。

这是 2 个过滤器发生冲突的示例:

http://codepen.io/anon/pen/NPvdBw

这是js:

$(function(){
// Filter portfolio
$(window).load(function(){
    var $container = $('.popup-portfolio'); 

    $container.css({visibility:'visible'});

    var isotopePortfolio = function(filter){
        $container.isotope({ 
            filter: filter, 
            animationOptions: { 
                duration: 750, 
                easing: 'linear', 
                queue: false
            },
            masonry: {
                isFitWidth: true,
                isResizable: true,
                gutter: 15
            }
        }); 
    };

    isotopePortfolio('*');

    $('.filter-portfolio a').click(function(e){ 
        e.preventDefault();

        $('.filter-portfolio li').removeClass('active');

        $('.filter-portfolio a').removeClass('disabled');

        $(this).parent('li').addClass('active');

        $(this).addClass('disabled');

        var selector = $(this).attr('data-filter'); 

        isotopePortfolio(selector);
    }); 
});

// Only animate elements when using non-mobile devices    
if (jQuery.browser.mobile === false) 
{
    $('.portfolio-item > .inner-content').each(function(i)
    {            
        var element = $(this),
        itemsDelay   = ( isNaN($(this).data('animation-delay')) ? 50 : $(this).data('animation-delay') );
        element.css('opacity', 0).one('inview', function(isInView) {
            if (isInView)
            {
                setTimeout(function(){
                    element.addClass('animated fadeInUp').css('opacity', 1);
                } , itemsDelay * i);
            }
        });
    });
}

$('.popup-portfolio').magnificPopup({
    delegate: 'a',
    type: 'image',
    fixedContentPos: false,
    gallery: {
        enabled: true,
        preload: [0,2],
        navigateByImgClick: true,
        arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>',
        tPrev: 'Previous (Left arrow key)',
        tNext: 'Next (Right arrow key)'
    }
});

});

Answer 1

你的代码中有这一行:

var $container = $('.isotope')

这意味着 $container 变量将包含所有 .isotope div(在本例中为两个)。现在在您的过滤器处理程序中添加以下行:

$container.isotope({ filter: filterValue });

在两个元素上应用过滤器。

解决方案:使用 jQuery 识别被点击的 .button-group 并在相应的 .isotope 上应用过滤器:

// generalized function to handle toggle checked and
// apply filter functions for all button groups
$('.button-group').on('click', 'button', function() {
  var $buttonGroup = $(this).closest(".button-group");
  // toggle checked
  $buttonGroup.find('.is-checked').removeClass('is-checked');
  $(this).addClass('is-checked');
  // apply filter
  var filterValue = $(this).attr('data-filter');
  filterValue = filterFns[filterValue] || filterValue;
  $buttonGroup.next(".isotope").isotope({ filter: filterValue });
});

• > Original Pen
• > Updated Pen