動的なjQueryのCSSのコーナーケース

Question

私は動的にこのコード行でフラッシュメッセージを含むdiv要素にCSSクラスを追加します。私が追加したときに、それが実行されるように

$("div#flash_notice").toggleClass('success'); 

のJavaScriptファイルには、私のmicropostビューにありますポスト。ページをリフレッシュせずに2つの投稿を追加する場合を除いて、すべてがうまくいきます。なぜなら、フラッシュメッセージはスタイルを失うため、クラスを削除するために戻ってきます。どうすればこの問題を回避できますか？

Answer 1

は、トグルクラスを使用してはいけません。 addClassを使用して、それはそれを持っていない場合にのみ、そのクラスを追加します。

$("div#flash_notice").addClass('success'); 

Answer 2

あなたは、すでにクラスを持っていない要素にクラスを追加することができます

$("div#flash_notice").not('.success').addClass('success'); 

Answer 3

他の人が言及したようにあなたが代わりに.addClassメソッドを使用することができます。アニメーションについてコメントをrepsonseでは、このような何かを行うことができます：

var flashNoticeTimeout; 
var fadeOutDelay = 1000; 

function onPostAdded() { 
    var $flashNotice = $("#flash_notice"); // Get flash_notice element 
    $flashNotice.show().addClass("success"); // Show the flash element and then add the 'success' class. 
               // Need to use .show because the .fadeOut later on will have hidden this element 

    clearTimeout(flashNoticeTimeout);   // Clear any previous timeouts. If the user button adds a post, then adds another post before the element has faded out, this will clear the last timeout so the element isn't hidden before 'fadeOutDelay` 

    flashNoticeTimeout = setTimeout(function() { // Trigger this anon function after 'fadeOutDelay' milliseconds (1000 milliseconds = 1 second) 
     $flashNotice.fadeOut();     // Fade out the element 
    }, fadeOutDelay); 
} 

は、デモ用のfiddleを参照してください。

Answer 4

または、より簡単に：。http://jsfiddle.net/LekisS/L2kvP/1/

$（ 'のdiv＃のflash_notice'）ディレイ（1000）.fadeOut（）;