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

Question

我有一个基本的 jQuery click 函数来显示/隐藏基于它们的 data-filter 属性的项目——不使用像 Isotope 这样的插件，只是一个简单的显示/隐藏函数——我还想使用过滤器来应用URL 哈希（如果存在），并将“活动”类附加到相应的过滤器按钮。

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

<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 那里得到了一些帮助，但我的情况有点不同。有趣的是，上面的代码导致 all .item div 隐藏并且 .active 类没有按需要附加，所以我不确定我哪里出错了。非常感谢任何帮助，如果需要进一步说明，请告诉我。

Answer 1

您应该调用 filter 函数，而不是 each 函数。此外，您需要返回我们应该根据它进行过滤的布尔值。我不太确定你的链接 .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');
    }
});