Dynamic JQuery CSS угловой случай

Я динамически добавить класс CSS в DIV, содержащий флэш-сообщение с этой строки кода:Dynamic JQuery CSS угловой случай

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

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

источник

2011-03-08 Justin Meltzer

Это зависит от того, что вы хотите. Вы хотите, чтобы класс 'success' просто остался? Вы хотите каким-то образом запустить flash/blink \ animate 'flash_notice', чтобы пользователь знал, что переключатель применяется к их последнему сообщению? Вы хотите, чтобы он изменился на другой класс? Кроме того, поскольку вы ссылаетесь на элемент по id, нет необходимости использовать префикс имени тега. ('# flash_notice' вместо' div # flash_notice') – Chris

Прежде всего, неправильно иметь два элемента с одним и тем же идентификатором. Для этого вы должны использовать классы. Я видел, как браузеры нарушают функциональность, если это произойдет. – usoban

@Rfvgyhn Мне изначально не хотелось делать анимацию, но мне любопытно, какой код понадобится для того, чтобы сообщение исчезло через 5 секунд? –

DonT класс использовать тумблер. использовать addClass и это добавит класс, только если он не имеет его:

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

источник

2011-03-08 18:43:31 Neal

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

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

источник

2011-03-08 18:41:28

Вы можете использовать .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 для демонстрации.

источник

2011-03-08 19:01:01 Chris

и не могли бы вы объяснить, что это делает в деталях? –

Я не совсем уверен, как интегрировать это в мой код –

См. Исправления для объяснения. – Chris

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

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

источник

2011-03-08 19:04:19

Это не сбрасывает таймер, если кнопка нажата несколько раз до выцветания. Я не уверен, как Джастин Мельцер хочет, чтобы он работал. – Chris

Как насчет добавления '.clearQueue()' перед '.delay()'? –

Dynamic JQuery CSS угловой случай

ответ

Смежные вопросы