javascript - 如何使用 addClass() 将类添加到元素的类列表中

Question

我的 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() 以便在类前面而不是附加它。

Answer 1

您的要求的替代方案。

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

检查这个fiddle演示。

摘录:

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