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

Question

我的 HTML 中有一个 div

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

我需要在鼠标悬停时添加一个“警报危险”类。所以我使用了以下代码

    $(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

您的要求的替代方案。

您可以在

!important

类中将

alert-danger

标记为 css 属性，这将根据您的要求优先考虑 css 效果。

检查这个fiddle演示。

摘录：

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

Answer 2

或者：

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

检查jsfiddle。

Answer 3

HTML 中类名的顺序不会影响实际应用样式的优先级或特殊性。