javascript - 使用 jquery css 覆盖的同位素过滤器无法按预期工作

Question

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

/***************************************************
        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”第二行向右第三行。

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

Answer 1

这是我所看到的:如果您选择“全部”作为过滤器，然后切换到其他过滤器，它就会起作用。但是，在您初始化同位素的 jquery.isotope.min.js 中(为什么在这里而不是在 custom.js 中执行此操作？)，您的初始过滤器是广告

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