Question

这是我的代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="scripts/jquery-1.10.1.js"></script>
</head>
<body>
    <link href="css/colorcss.css" rel="stylesheet" />
    <script type="text/javascript" src="scripts/sample.js"></script>
    <form id="form1" runat="server">
    <div>
        <input type="button" id="btnSample" value="click me" />
        <label id="lblAll">All Toggle</label>
    </div>
    </form>
</body>
</html>

的javascript：

$(document).ready(function () {
    $("#lblAll").addClass("defaultColor");
});

$("body").on("click", "#lblAll", function () {
    $("#lblAll").toggleClass("dummy");
});

的CSS：

.dummy {
     background: yellow;
}
.defaultColor {
background-color: aliceblue;
 }

问题是，上面的代码不起作用。我尝试使用addClass，其中js是在一些外部js文件中编写的。相同的脚本，如果我放在身体下它工作正常。我做错了吗？

Answer 1

这是因为虚拟后css中存在的.defaultColor总是覆盖.dummy所应用的颜色，因为它出现在.defaultColor之前。因此，如果您切换css规则的放置顺序，它应该可以正常工作。这只是Css特异性的问题。

请参阅此订单，以便.dummy成功覆盖.defaultColor。

   .defaultColor {
      background-color: aliceblue;
    }

    .dummy {
      background: yellow;
   }

Fiddle

有些读取css特异性。

http://css-tricks.com/specifics-on-css-specificity/ https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 2

[<强> 1 ]。在您的css班!important

中使用.dummy

这样：

.dummy {
    background: yellow !important; /*<---here*/
}
.defaultColor {
    background-color: aliceblue;
 }

Find in fiddle here

[<强> 2 ]。或者，您可以将.dummy向下移至.defaultColor：

这样：

.defaultColor {
    background-color: aliceblue;
 }
.dummy {
    background: yellow; 
}

Answer 3

请首先应用此代码删除旧类

像这样

$("body").on("click", "#lblAll", function () {
    $("#lblAll").removeClass("defaultColor").toggleClass("dummy");
});

Answer 4

是的，我认为，您已将代码2 times编写为executes 2次第一次，这是用scripts/sample.js编写的。

第二个一个在您的页面中。从任何一方删除代码可以解决您的问题。

小提琴 http://jsfiddle.net/dSXPE/1/

Also check if I wrote the code 2 times then what will happen

小提琴 http://jsfiddle.net/dSXPE/2/

外部js文件问题中的jQuery addClass

4 个答案:

Fiddle