Question

我已经仔细查看了搜索，但无法为我的问题找到具体的解决方案。我有以下代码：

    $('.filter li a').on('click', function(event){
    event.preventDefault();
    var $self = $(this);
    var $this = $(this).parent();

    if($this.hasClass('active')) {
        return;
    }

    $self.closest('ul').children().removeClass('active');
    $self.parent().addClass('active');

    $container.shuffle( 'shuffle', $this.data('group') );
});

我现在想删除这一行：

$self.closest('ul').children().removeClass('active');

目标应该是，我可以选择多个项目而不只是一个类别＃34;活跃＆＃34;。有什么想法吗？

非常感谢。

在这里更清楚一个小图像菜单的外观：

访客来到页面和点＃34;显示全部＆＃34;被标记。不，他应该可以从四个选项中选择＆＃34; A3，A4，Farbe，S / W＆＃34;。使用当前代码，它可以同时选择一个。但我需要能够同时选择更多。

这里是HTML代码：

<div class="filter">
        <ul>
            <li class="active" data-group="all"><a href="#">Show All</a></li>
                                        <li data-group="a3" class=""><a href="#">A3</a></li>
                                                <li data-group="a4" class=""><a href="#">A4</a></li>
                                                <li data-group="farbe" class=""><a href="#">Farbe</a></li>
                                                <li data-group="s-w" class=""><a href="#">S/W</a></li>
                                </ul>
    </div>

已于2016年3月17日添加：有5个菜单点。第一个是＆＃34;显示所有＆＃34;。当点击其他4个点（A3，A4，Farbe，S / W）中的一个时，第一个（全部显示）应该松开课程＆＃34;活动＆＃34;并且点击的新单元应该得到类＆＃34;活动＆＃34;。如果再次＆＃34;显示全部＆＃34;单击此按钮，只有此菜单点应具有类＆＃34;活动＆＃34;。

每个菜单点都有一个数据组。要点＆＃34; Show-All＆＃34;有data-group =＆＃34; all＆＃34;。因此，如果单击此菜单点，则只应激活此数据组。如果菜单指向＆＃34; A3＆＃34;单击，数据组=＆＃34; A3＆＃34;应该是活跃的。如果还是＆＃34; A4＆＃34;单击，此数据组也应处于活动状态。同样的，如果＆＃34; A4＆＃34;再次单击，类=＆＃34;活动＆＃34;应该删除数据组=＆＃34; A4＆＃34;。当＆＃34;显示全部＆＃34;再次单击，应删除所有数据组，只删除data-group =＆＃34; all＆＃34;应该是活跃的。

Answer 1

用户＆＃34;通常＆＃34;期望在按住 Shift 键时选择多个条目，因此您可以将该行修改为：

if (!event.shiftKey) {
  $self.closest('ul').children().removeClass('active');
}

所以现在你仍然会一次选择一个项目，直到你按住 Shift 键。

Answer 2

因此，如果你不想删除所有类，那么只需在当前点击它上面切换它。

＆＃13;

$('.filter li a').on('click', function(event) {
  $(this).parent().toggleClass("active");
});

＆＃13;

.active { background-color: green; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter">
  <ul>
    <li class="active" data-group="all"><a href="#">Show All</a></li>
    <li data-group="a3" class=""><a href="#">A3</a></li>
    <li data-group="a4" class=""><a href="#">A4</a></li>
    <li data-group="farbe" class=""><a href="#">Farbe</a></li>
    <li data-group="s-w" class=""><a href="#">S/W</a></li>
  </ul>
</div>

＆＃13;

JQuery - 删除类

2 个答案: