Question

我已将Isotope安装到WordPress网站上以过滤品牌列表。一切正常，除了第一次加载图像或第一次点击过滤器时。

单击过滤器时，项目似乎正确过滤，但随后从屏幕顶部重新加载到位。每次过滤都会发生这种情况，但仅在第一次点击时才会发生。如果再次单击同一过滤器，则项目加载正常。

问题可以在http://bodyfirst.ie/damien-test找到。例如，如果单击字母M，N，O，P，您将看到问题。然后再次点击它们，你会发现它们看起来很好。

当用户点击全部时，问题会再次出现。

我添加的脚本是

<script src="<?php echo get_stylesheet_directory_uri() ?>/js/isotope.pkgd.min.js"></script>
 <script type="text/javascript">

jQuery(document).ready(function($){
//filterable


jQuery('#portfolio_brands').imagesLoaded( function(){
    jQuery('#portfolio_brands').isotope({
        itemSelector: '.filterable_brand',
        layoutMode: 'fitRows',
        itemPositionDataEnabled: true
    });
});


jQuery('.filters li a').click(function(){

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

    jQuery('#portfolio_brands').isotope({ filter: selector });

    return false;
}).filter(':first').click();


});
</script>

我只能想象这是第一次加载脚本的时候，但我不确定如何修复它或者甚至是原因。

Answer 1

我认为这可能是因为imagesLoaded函数每次都在运行，因此重新运行同位素初始化。

var functionRan = false;
jQuery('#portfolio_brands').imagesLoaded( function(){
    if(!functionRan) {
        jQuery('#portfolio_brands').isotope({
            itemSelector: '.filterable_brand',
            layoutMode: 'fitRows',
            itemPositionDataEnabled: true
        });
        functionRan = true;
    }
});


jQuery('.filters li a').click(function(){
    var selector = jQuery(this).attr('data-filter');
    jQuery('#portfolio_brands').isotope({ filter: selector });
    return false;
}).filter(':first').click();

过滤时，同位素图像加载不正确

1 个答案: