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点击“电影后”，就会看到这种现象。然后滚动“Paint Splash”＃39;第2排第3位到右边。

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

Answer 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调整大小时重新初始化同位素？

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

具有jquery css覆盖的同位素过滤器未按预期工作

1 个答案: