Question

我有一个基本的jQuery点击功能，根据他们的data-filter属性显示/隐藏项目 - 不使用像Isotope这样的插件，只是一个简单的显示/隐藏功能 - 我也想应用过滤器使用网址哈希（如果存在），并将“有效”类附加到相应的过滤器按钮。

在标记中，有一个带有“item”类的div网格，每个类都包含anchor元素和相关的data-filter，如下所示：

<div class="item">
    <a href="#" class="item-anchor" data-filter="apples">Item</a>
</div>

在下面的方法中，我试图获取URL哈希，隐藏其锚点与哈希字符串不匹配的所有元素，并将活动类附加到匹配的.filter-button元素：

$(window).load(function () {
    var hash = window.location.hash.substring(1);

    if (hash) {

        $('.item').each(function() {
            $(this).children('.item-anchor').data('filter') !== hash;            
        }).hide();

        $('a.filter-button[href="hash"]').addClass('active');

    }
});

我从this thread得到了一些帮助，但我的情况有点不同。有趣的是，上面的代码导致所有 .item div隐藏，并且.active类没有按需添加，所以我不知道我要去哪里这里错了。非常感谢任何帮助，如果需要进一步澄清，请告诉我。

Answer 1

您应该调用过滤器函数，而不是每个函数。此外，您需要返回我们应该基于的过滤器。我不太确定您的链接.active的用途，但我很确定您想要通过哈希过滤它。

$(window).load(function () {
    var hash = window.location.hash.substring(1);
    if (hash) {
        $('.item').filter(function() {
            return $(this).children('.item-anchor').data('filter') !== hash;            
        }).hide();

        $('a.filter-button[href="#'+hash+'"]').addClass('active');
    }
});

jQuery：使用URL哈希/片段标识符显示/隐藏项目

1 个答案: