jQuery isotope：根据 get 变量过滤页面加载

Question

我正在使用 jQuery 同位素插件，并且希望在页面加载时仅显示特定组中的项目。目前所有项目都显示：

http://aproposstudio.com/category/work/

例如，在上面的链接上，有没有办法加载显示“壁画”的页面？

谢谢。

Answer 1

答案很简单：

$('#container').isotope({ filter: '.your-filter-name' });

在代码中使用这一行。

请参阅此链接：http://isotope.metafizzy.co/docs/filtering.html

Answer 2

所以我认为您只想使用简单的 hide() 和 show() 方法

如果您使用应用于 html 元素的类，您可以轻松选择它们并使用以下 jQuery 行隐藏它们。

$(".project").hide()
$(".murals").show()

现在，这将“隐藏”所有项目，只显示壁画。

这有道理吗？

Answer 3

很简单！

(function ($) {
    $(window).load(function () {

        // settings
        var sortBy = 'date', // SORTING: date / name
            sortAscending = true, // SORTING ORDER: true = Ascending / false = Descending

            theFilter = '.YOUR SORT'; // DEFAULT FILTERING CATEGORY

Answer 4

我的画廊遇到了同样的问题，我看到了你的帖子。非常感谢你的帮助，这真的让我很开心！

这是我使用的最终代码，这可能对面临类似问题的其他人有所帮助。

首先，我为图库设置了一个默认过滤器值，最初设置为“*”以显示所有项目。单击菜单中的链接时，此默认过滤器会发生变化，如下所示：

<h4 class="menu-item"><a class="hover-underline-animation filter" data-filter=".identite-visuelle" href="/portfolio#identite-visuelle">Identité visuelle</a></h4>

这是图库的过滤器按钮：

<ul id="filters">
    <li><a href="#tout" data-filter="*" class="filterable-gallery__btn custom-btn">Tout</a></li>
    <li><a class="filterable-gallery__btn custom-btn" href="#" id="identite-visuelle" data-filter=".identite-visuelle">Identité visuelle</a></li>
    <li><a class="filterable-gallery__btn custom-btn" href="#" id="illustration" data-filter=".illustration">Illustration</a></li>
    <li><a class="filterable-gallery__btn custom-btn selected" href="#" id="print" data-filter=".print">Print</a></li>
    <li><a class="filterable-gallery__btn custom-btn" href="#" id="webdesign-sites-internet" data-filter=".webdesign-sites-internet">Webdesign/Sites Internet</a></li>
</ul>

然后，对于 JavaScript：

// Default Isotope settings
var lastFilter = '*'; // Default filter
var sortBy = 'date'; // Default sorting method
var sortAscending = true; // Default sorting order

var $container = $('#gallery');
$container.isotope({
    itemSelector: '.gallery-item',
    percentPosition: true,
    masonry: {
        columnWidth: '.gallery-sizer'
    },
    sortBy: sortBy,
    sortAscending: sortAscending,
    filter: lastFilter 
});

var $optionsSets = $('#filters');
var $optionsLinks = $optionsSets.find('a');
    
$optionsLinks.click(function() {
    var $this = $(this);
    if ($this.hasClass('selected')) {
        return false;
    }
        
    var selector = $this.attr('data-filter');

    // Update the lastFilter variable with the new selected filter
    lastFilter = selector;
        
    $container.isotope({
        filter: selector
    });
        
    $optionsSets.find('.selected').removeClass('selected');
    $this.addClass('selected');
        
    return false;
});

// Click event for portfolio menu links
$('.portfolio-nav a').click(function(e) {
    e.preventDefault(); // Prevent default link behavior
        
    // Get the selector from the data-filter attribute of the clicked link
    var selector = $(this).attr('data-filter');
    
    // Update the lastFilter variable with the new selected filter
    lastFilter = selector;

    // Trigger a click on the corresponding filter button in Isotope
    $optionsSets.find('[data-filter="' + selector + '"]').trigger('click');
});

我希望这样帮助任何面临类似问题的人！如果您有任何疑问，请随时与我们联系。