Question

我想在点击元素时添加一个类。但是，如果此类的父级已经包含此类，则应首先删除此类。它似乎不起作用。它只是添加新类，但它不会删除现有类。

$(".btn").click(function() {
    var par = $(this).parent('div').attr("class");
    if(par.has(".active")){
        $(this).addClass("active");
    } else {
        $(this).removeClass("active");
        $(this).addClass("active");
    }
});

我的HTML结构将是

<div class="container">
   <a class="btn">button</a>
   <a class="btn">button</a>
</div>
<div class="container">
   <a class="btn">button</a>
   <a class="btn">button</a>
</div>
<div class="container">
   <a class="btn">button</a>
   <a class="btn">button</a>
</div>

每个容器只能包含一个活动类，在这种情况下总共有三个。

Answer 1

试试这个：

$(function() {
    $('a.btn').on('click', function() {
        var self = this;
        var parent = $(self).parent();

        parent.find('.active').removeClass('active');
        $(self).addClass('active');
    });
});

这里是小提琴：http://jsbin.com/aluyom/1/edit。

编辑：

无需使用if语句。如果找到，此行parent.find('.active').removeClass('active');将删除该类。

Answer 2

我认为这是因为使用.attr（）和/或.has（）在类名中加了一个点，试试这个：

if($(this).parent('div').hasClass("active"))

如果父元素包含类，则添加类

2 个答案: