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

【问题标题】：How to use addClass() to prepend the class in the element's class list如何使用 addClass() 在元素的类列表中添加类
【发布时间】：2014-08-18 03:25:22
【问题描述】：

我的 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() 以便预先添加类而不是附加它。

【问题讨论】：

您可以使用$(this).removeClass(); 删除所有类，然后按特定顺序添加所有三个类$(this).addClass("alert-danger btn btn-primary btn-block");
这是一个fiddle 作为我上述建议的示例。
您还可以在 alert-danger 类中将 !important 标记为 css 属性，这将根据您的要求优先考虑 css 效果。检查@SamyS.Rathore jsfiddle.net/3Wb3G/1 的更新小提琴
@ChiragVidani +1 提到了!important，我个人更喜欢 CSS 解决方案而不是使用脚本来处理这些简单的事情。
@SamyS.Rathore 添加为答案

标签： javascript jquery addclass

【解决方案1】：

或者：

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

检查jsfiddle。

【讨论】：

【解决方案2】：

替代您的要求。

您可以将!important标记为alert-danger类中的css属性，这将根据您的要求优先考虑css效果。

查看此fiddle 演示。

【讨论】：

感谢您的替代建议 .. 效果很好 :)