带有 jquery css 覆盖的同位素过滤器无法按预期工作答案

【问题标题】：Isotope filter with jquery css overlays not working as expected带有 jquery css 覆盖的同位素过滤器无法按预期工作
【发布时间】：2015-10-28 03:26:13
【问题描述】：

我有一个奇怪的问题，我正在使用同位素的可过滤功能对我的投资组合中的元素进行排序。当用户将鼠标悬停在某个投资组合元素上时，会使用以下代码触发覆盖：

/***************************************************
        PORTFOLIO ITEM IMAGE HOVER
***************************************************/
$(window).load(function(){

    $(".portfolio-grid ul li .item-info-overlay").hide();

    if( is_touch_device() ){
        $(".portfolio-grid ul li").click(function(){

            var count_before = $(this).closest("li").prevAll("li").length;

            var this_opacity = $(this).find(".item-info-overlay").css("opacity");
            var this_display = $(this).find(".item-info-overlay").css("display");


            if ((this_opacity == 0) || (this_display == "none")) {
                $(this).find(".item-info-overlay").fadeTo(250, 1);
            } else {
                $(this).find(".item-info-overlay").fadeTo(250, 0);
            }

            $(this).closest("ul").find("li:lt(" + count_before + ") .item-info-overlay").fadeTo(250, 0);
            $(this).closest("ul").find("li:gt(" + count_before + ") .item-info-overlay").fadeTo(250, 0);    

        }); 

    }
    else{   
            $(".portfolio-grid ul li").hover(function(){
                $(this).find(".item-info-overlay").fadeTo(250, 1);
                }, function() {
                    $(this).find(".item-info-overlay").fadeTo(250, 0);      
            });

        }
});

但是，有时由于同位素过滤器接收“覆盖”属性/类（在 Chrome 检查器中确认）的方式而隐藏的其他元素，而显示的元素却没有。我认为这与$(this).find 选择错误的元素有关，因为它不了解同位素过滤器，但我不能确定。

如果你去http://fagardesigns.com/portfolio点击'aftermovie'并滚动到'Paint Splash'第2行右3，这个现象是可见的。

如果你重新加载页面，这个有时会消失，这也是很奇怪的事情。

【问题讨论】：

您可以创建一个 DEMO，而不是您的个人/项目站点链接。使用在线工具（plunker/jsfiddle/codepen）。

标签： javascript jquery jquery-isotope masonry

【解决方案1】：

这是我看到的：如果您选择 ALL 作为过滤器，然后切换到其他过滤器，它会起作用。但是，在您初始化同位素的 jquery.isotope.min.js 中（为什么要在这里而不是在 custom.js 中？），您的初始过滤器是advertisement

var $container = $('#thumbs');
      $container.isotope({
        filter: '.advertisement', <= why is this the initial filter?
        itemSelector : '.item',
        animationEngine : 'jquery',
        animationOptions: {
            duration: 250,
            easing: 'linear',
            queue: false
        }
      });

当窗口调整大小时，为什么要重新初始化同位素？

    $(window).resize(function() {
        var $container = $('#thumbs');
            $container.isotope({
                filter: '.advertisement',
                itemSelector : '.item',
                animationEngine : 'jquery',
                animationOptions: {
                    duration: 250,
                    easing: 'linear',
                    queue: false
                }
        });
    });

【讨论】：