2

これは非常に単純なようですが、それでも正しく機能しません。

クラス.normalを.hightlight..の上に置くと機能しますが、ここではスタイルを変更しません。位置のみを変更します。これは意味がありません。

ここにhtmlコードを貼り付けることができないようですので、ブロック単位で貼り付ける必要があります。そして、すべてのコードのスナップショットを同封しました。

空のhtmlページがあることを確認してください。Doctypeは重要ではありません。さまざまなDoctypeでテストしましたが、それでも正しく機能しません。

これは、ヘッダーの後のスタイルブロックの内側にあります

.highlight { color:black; background-color:yellow; }
.normal {  color:white; background-color: blue; }

この後、最新のjqueryコードのソースを含むスクリプトタグがあります http://code.jquery.com/jquery-latest.min.js

そして、この後、スクリプトがブロックされ、ここに次のようになります。

$(document).ready(function () {
  $('#maindiv').css('cursor', 'pointer');
  $('#maindiv').click(function () {
    //alert("click");
   // $(this).toggleClass("highlight"); //this does not work!
   // $(this).addClass('highlight'); //this does not work!

   // $(this).attr("class", "highlight"); //this works
   // $(this).css("background", "yellow"); this works

    // the javascript way to do this works also fine.
    // var element = document.getElementById('maindiv');
    // element.setAttribute("class", "highlight");
});

}）;

そして、本体の内部に、ID名が「maindiv」でクラスが「normal」のapタグがあります。

テキスト付きはこちらをクリックしてください。

桶、私も誰かがこれを試すまで待つことができません..他のすべての方法がうまくいくので、それはクレイジーです。ただし、.addClassと.toggleClassのみが正しく機能しません

私は新しいユーザーなので、ここに完全なコードのスナップショットを含めることはできませんが、 http ：//www.bckan.nl/temp/jquerybug.jpgからダウンロードできます。

4

2 に答える 2

2

名前が示すように、addClass と toggleClass はクラスを追加するだけです。つまり、要素にはまだ .normal があり、.highlight よりも優先度が高い可能性があるため、色の変更は適用されません。DOM を確認すると、クラスが追加されていることがわかります。CSS で .highlight を追加するか、.highlight の上に .normal を配置するだけでなく、.normal を .highlight に置き換えてみてください。.highlight のプロパティに !important を追加することもできますが、これはお勧めしません。

于 2012-03-04T18:07:01.803 に答える
2

試す：

$(document).ready(function () {
    $('#maindiv').css('cursor', 'pointer');
    $('#maindiv').on('click', function() {
        $(this).toggleClass("highlight").toggleClass('normal');
    });
});

コードを試しませんでしたが、クラスが正常に追加されると思いますが、「通常の」クラスを削除しないため、css は上書きされません。

また、最適化のために、JavaScript で .css を最小限に抑えるようにしてください。maindivs カーソルをポインターに設定することは、.css ファイルで簡単に設定できます。.click / .live / .bind などは避けてください。これらは非推奨であり、すべて新しい .on 関数にリンクしています。そのため、代わりに .on を直接使用してください。

ああ、css に !important を追加しても機能しますが、これもできるだけ避けるべきものであり、後で難しくなります。

于 2012-03-04T18:10:07.593 に答える