jQuery：Show/hide 项使用 URL 哈希/片段标识符

Question

我有一个基本的 jQuery 单击功能，可以根据 data-filter 属性点击 shows/hides 项目——不使用像 Isotope 这样的插件，只是一个简单的 show/hide 功能——并且我还想使用 URL 散列 应用过滤器（如果存在），并将 'active' class 附加到相应的过滤器按钮.

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

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

在我下面的方法中，我试图获取 URL 散列，隐藏其锚点与散列字符串不匹配的所有元素，并将活动的 class 附加到匹配的 .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 class 没有按需要附加，所以我不知道我哪里错了。非常感谢任何帮助，如果需要进一步说明，请告诉我。

Answer 1

您应该调用 filter 函数，而不是 each 函数。此外，您需要 return 我们应该根据其进行过滤的布尔值。我不太确定你的 link .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：Show/hide 项使用 URL 哈希/片段标识符

jQuery: Show/hide items using URL hash / fragment identifier

javascript

url

jquery

fragment-identifier