#javascript #jquery #html
#javascript #jquery #HTML
Вопрос:
У меня есть кнопка HTML, которая вызывает функцию для отображения уведомления о начальной загрузке на экране. Существует также встроенный метод jQuery, позволяющий отключать уведомления через 1 секунду.
Метод работает нормально, но если я вызываю метод (т. Е. нажимаю кнопку) в быстрой последовательности, уведомления, похоже, «зависают» на странице, и страницу необходимо обновить, чтобы удалить замороженные уведомления.
Я пытался поработать с различными обработчиками событий jQuery, которые позволят всем видимым уведомлениям в конечном итоге исчезнуть через определенный период времени. Ничто из того, что я пробовал до сих пор, не сработало так, как мне нужно.
Вот метод JS, который привязан к нажатию кнопки, вызывает появление уведомления и его исчезновение.
function showDiv() {
let div = document.createElement("div");
div.innerHTML = '<div id="newAlert" class="alert alert-
info">Hello</div>'
document.body.appendChild(div);
$("#newAlert").delay(1000).fadeOut("slow", function() {
$("#newAlert").remove();
});
}
Я хочу настроить это так, чтобы независимо от того, сколько раз я запускал этот метод, каждое появляющееся уведомление исчезало через 1 секунду. Любые рекомендации о том, как я могу это исправить, были бы с благодарностью приняты. Спасибо
Комментарии:
1. Насколько «быстро» мы говорим? То, что вы пытаетесь сделать, может оказаться невозможным. Ваши уведомления могут зависать из-за того, что ваш клиент не в состоянии следить за выполнением кода.
2. Возможно, я ошибаюсь, но я предполагаю, что это потому, что вы используете
#newAlertв качестве идентификатора, и может быть более одного div с этим идентификатором. Если это так, возможно, вы можете установить идентификатор как math.random(), чтобы он был уникальным при каждом вызове метода.3. @IskandarRezaRazali Это хороший момент, но я чувствую, что использование класса для этого было бы лучше поддерживаться, особенно если есть какое-то событие, которое вы можете использовать, чтобы проверить, был ли класс, который вы используете, добавлен в dom, и если это было, используйте
$(this), чтобы удалить его.
Ответ №1:
Проблема в том, что идентификатор одинаков у всех из них. Это ужасная идея, но она должна сработать.
function showDiv() {
let div = document.createElement("div");
let id = new Date().getTime();
div.innerHTML = `<div id="${id}" class="alert alert-info">Hello</div>`
document.body.appendChild(div);
setTimeout(() => {
$("#" id).fadeOut("slow", function() {
$("#" id).remove();
});
}, 1000)
}
Комментарии:
1.
<div id="${id}"это действительно работает? Я думал, что мы должны сделать это следующим образом:'<div id="' id '"2. Обратите внимание на `, js поддерживает литералы шаблонов developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /…
3. Обратите внимание, что при этом остается мусор из пустых
divфайлов4. @AlexKudryashev
This is a terrible idea5. @infamoustrey
idздесь избыточен.let div...уже ссылается наdiv, и нет необходимости находить его с помощью$("#" id). Externaldivне был удален в ответе.
Ответ №2:
В id этом вообще нет необходимости. Ссылка на объект уже существует. Также jQuery позволяет делать все в одном операторе. Что-то вроде этого.
function showDiv() {
$("<div/>")
.html('<div class="alert alert-info">Hello</div>')
.appendTo('#notif')//or body
.delay(1000).fadeOut("slow", function() {
$(this).remove();
});
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" onclick="showDiv()">show</button>
<div id="notif"></div> Комментарии:
1. Отличный ответ, но мне нужно, чтобы div отображался только при нажатии кнопки, он не может существовать на странице заранее. Тем не менее, ценю ответ!
2. Это именно то, о чем вы просите.
divПоявляется только при нажатии кнопки. Более того, он исчезает и не оставляет мусора (пустогоdiv).