删除组内元素的 class 以进行同位素过滤

Question

我试图在用户单击 'all' 按钮时从组中的所有按钮中删除 class 'is-checked'。我正在使用两组过滤器按钮：类别和标签。

我已经能够创建一个函数，从两个组的所有按钮中删除 class 'is-checked'，但我还不能将函数隔离到每个组，虽然我很亲近。

最终函数会将 class 'is-checked' 添加到 'all' 按钮，并从该特定组中的任何其他按钮中删除 class。该函数有效，除了下面有问题的行：

    $buttonGroup.find('.is-checked').removeClass('is-checked');

代码：

// class toggling for all buttons by group
    $('.button-group').each( function( i, buttonGroup ) {
        var $buttonGroup = $( buttonGroup );
        var $this = $(this);
        $buttonGroup.on( 'click', 'button', function() {
            if ( $this.hasClass('all') ) {
                $buttonGroup.find('.is-checked').removeClass('is-checked');
                $this.addClass('is-checked');
            }
            else {
                $buttonGroup.find('.all').removeClass('is-checked');
            }
        });
    });

如标题所述，这是在 Isotope 框架内用于具有组合过滤功能的投资组合（因此有两组不同的过滤器）。

有什么地方出错了吗？

Answer 1

这是范围问题。变量 $buttongroup 位于 each 调用的函数中，而不是单击事件处理程序中。我建议这样解决：

// When someone clicks a button in a button group.
$('.button-group button').click(function() {
    // Get the button that was clicked.
    $this = $(this);
    // Get the button group the button that was clicked is in.
    $buttonGroup = $this.parents('.button-group');
    // And now this is just a copy of your old code below.
    if ( $this.hasClass('all') ) {
        $buttonGroup.find('.is-checked').removeClass('is-checked');
        $this.addClass('is-checked');
    }
    else {
        $buttonGroup.find('.all').removeClass('is-checked');
    }
});

如您所见，此方法不需要 each。相反，按钮使用 parents().

找出它所在的按钮组。

删除组内元素的 class 以进行同位素过滤

Remove class for elements within a group for Isotope filtering

jquery

click

each

jquery-isotope