jquery 如何使用addClass()在元素的类列表中添加类

kh212irz 于 2023-03-17 发布在 jQuery

关注(0)|答案(2)|浏览(137)

我的HTML中有div

<button id="abc" class="btn btn-primary btn-block"></button>

我需要在鼠标悬停时添加一个类'alert-danger'，所以我使用了以下代码

$(document).on("mouseover","#abc",function()
    {
          $(this).addClass("alert-danger");
    });

这样做效果很好，它会将类追加到类列表的末尾，如下所示

<button id="abc" class="btn btn-primary btn-block alert-danger"></button>

但问题是'btn'和'alert-danger'类有一些共同的css规则，'btn'优先（因为它是列表中的第一个）并禁用'alert-danger'的规则，所以我的按钮应该是这样的，'alert-danger'类是类列表中的第一个。

<button id="abc" class="alert-danger btn btn-primary btn-block"></button> // My requirement

如何修改我的addClass（）以便预先挂起类而不是追加类。

2条答案

你方要求的替代品。
您可以在alert-danger类中将!important标记为css属性，这将根据您的要求优先考虑css效果。
查看此fiddle演示。
摘录：

.alert-danger{
    background: #FF0000 !important;
    color: blue !important;
}

或者：

$(document).on("mouseover","#abc",function(){
$(this).removeClass("alert-danger");
$(this).attr("class","alert-danger "+$(this).attr("class"));})

检查jsfiddle。