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;
 }

問題は、上記のコードが機能しないことです。jsが外部jsファイルに書き込まれているaddClassを使用しようとしています。同じスクリプトを本体の下に配置すると、正常に動作します。私は何か間違ったことをしていますか？

4

4 に答える 4

1

[ 1 ]。!importantCSS クラスで使用する.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 に答える
1

これは.defaultColor、ダミーの後に css に存在する which は、 によって適用される色を常にオーバーライド.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 に答える
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

2つ目はあなたのページにあります。いずれかの側からコードを削除すると、問題が解決する場合があります。

フィドル 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 に答える