Динамический угловой корпус JQuery CSS

Question

Я динамически добавляю CSS-класс в div, содержащий флэш-сообщение с этой строкой кода:

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

Файл javascript находится в моем представлении micropost, поэтому он выполняется при добавлении сообщения. Все хорошо, за исключением случаев, когда я добавляю две записи без обновления страницы, потому что тогда флэш-сообщение теряет свой стиль, когда оно переключается назад, чтобы удалить класс. Как я могу обойти это?

Answer 1

не используйте класс переключения. используйте addClass и он добавит класс, только если у него его нет:

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

Answer 2

или, проще: http://jsfiddle.net/LekisS/L2kvP/1/

.

$ ( '# DIV flash_notice') задержка (1000) .fadeOut ();

Answer 3

Вместо этого вы можете использовать метод .addClass, как уже упоминали другие. В ответ на ваш комментарий об анимации вы можете сделать что-то вроде этого:

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

См. скрипка для демонстрации.

Answer 4

Вы можете добавить класс только к элементам, у которых еще нет этого класса:

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