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

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>

每个容器只能包含 1 个活动类，因此在这种情况下总共有 3 个。

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"))