JQuery - 删除类

时间:2016-03-16 23:02:02

标签: jquery

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

    $('.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;活跃"。 有什么想法吗?

非常感谢。

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

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

这里是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;应该是活跃的。

2 个答案:

答案 0 :(得分:0)

用户&#34;通常&#34;期望在按住 Shift 键时选择多个条目,因此您可以将该行修改为:

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

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

答案 1 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;