在页面加载时应用同位素数据过滤器

Question

我有一个WordPress插件，它使用同位素数据过滤器对菜单项进行排序，但在页面加载时，项目未分类。我增加了以下功能到我的functions.php：

function add_custom_script(){ 
?> 
<script> 
(function($){ 
    $(window).load(function() { 
     $('a[data-filter=".sparmenue"]').trigger('click'); 
    }); 
})(jQuery); 
</script> 
<?php 
} 
add_action('wp_footer', 'add_custom_script'); 

它的工作，但由于后最初显示的项目它的执行它的丑陋。我在这里阅读另一篇关于类似问题的文章，但我无法获得适用于我的特定模板的解决方案。

Demo page。

Answer 1

您是否尝试过通配符过滤器来获取所有项目？

<a href="#" data-filter="*" class="menu-filter-link">Alle anzeigen</a> 

编辑： OK，我认为你不需要的第一个菜单上的所有项目。所以这里是一个jsfiddle显示你所需要的。

编辑：就在你的文件

(function($){ 
    $(window).load(function() { 
     $('a[data-filter=".sparmenue"]').trigger('click'); 
    }); 
})(jQuery); 

年底将这段代码有了这一个

$(function(){ 

    var $container = $('#grid-wrap'), 
     $filterLinks = $('#menu-filters a'); 

    $container.isotope({ 
    itemSelector: '.isotope-item', 
    filter: '.sparmenue' 
    }); 

    $filterLinks.click(function(){ 
    var $this = $(this); 

    // don't proceed if already selected 
    if ($this.hasClass('selected')) { 
     return; 
    } 

    $filterLinks.filter('.selected').removeClass('selected'); 
    $this.addClass('selected'); 

    // get selector from data-filter attribute 
    selector = $this.data('filter'); 

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


    }); 

}); 

如果你愿意，你也可以添加旁边的一个选择类菜单过滤器链接来突出显示所选类别。