1

这是我的代码：

<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 文件中。相同的脚本，如果我放在正文下，它可以正常工作。我做错什么了吗？

4

4 回答 4

1

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

查看此顺序，以便.dummy如果存在，将成功覆盖.defaultColor。

   .defaultColor {
      background-color: aliceblue;
    }

    .dummy {
      background: yellow;
   }

小提琴

一些关于 css 特异性的读物。

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

于 2013-06-12T05:33:44.843 回答
1

[ 1 ]。!important在你的 CSS 类中使用.dummy

这边走：

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

在这里找到小提琴

[ 2 ]。或者您可以将.dummy下面的向下移动到.defaultColor：

这边走：

.defaultColor {
    background-color: aliceblue;
 }
.dummy {
    background: yellow; 
}
于 2013-06-12T05:41:11.197 回答
0

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

像这样

$("body").on("click", "#lblAll", function () {
    $("#lblAll").removeClass("defaultColor").toggleClass("dummy");
});
于 2013-06-12T05:39:39.757 回答
0

是的，我认为，你已经编写了你的​​代码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/

于 2013-06-12T05:40:38.937 回答