Скрывать и отображать блоки с помощью SetInterval

Question

<div class="notification__inner">
 <p hidden class="notification__item">1</p>
 <p hidden class="notification__item">2</p>
 <p hidden class="notification__item">3</p>
</div>

const notificationItem = document.querySelectorAll('.notification__item');

notificationItem.forEach(notification => {
  setInterval(() => {
    notification.hidden = false;
  }, 2000);
});

Нужно чтобы работала как плашка уведомлений на сайте. Одна отображается, потом скрывается и вместо нее отображается вторая и так далее... До тех пор пока пользователь не нажмет на крестик, чтобы все закрыть.

Задача простая, но спустя 2-3 часов поисков и мучений - ничего не нашла и не могу понять как сделать. В данном примере, хочу что-бы блоки notification__item отображались поочередно меняя друг друга

Answer 1

Так?

Решение

const first = document.querySelector(`p.notification__item`); // Находим первое уведомление
if (first) { // если существует
  first.hidden = false; // показываем его
  setInterval(() => { // запускаем таймер
    const selected = document.querySelector(`p.notification__item:not([hidden])`); // Находим уведомление которое показывается в данный момент
    const next = document.querySelector(`p.notification__item:not([hidden]) + p.notification__item[hidden]`); // Находим следуюшее уведомление
    if (selected) selected.hidden = true; // Скрываем уведомление которое показывается в данный момент
    (next ?? first).hidden = false; // Показываем следующее уведомление, если существет, или первое в противном случае
  }, 2000);
}

<div class="notification__inner">
  <p hidden class="notification__item">У вас 10 непрочитанных сообщений</p>
  <p hidden class="notification__item">Пользователь "Альберт Эйнштейн" хочет добавить вас в друзья</p>
  <p hidden class="notification__item">Пожертвуйте церкви 1000р и получайте вип статус на нашем сайте</p>
</div>

Решение получше

Я бы не советовал информацию хранить в тегах и скрывать их. Будут проблемы с утечкой информации, а так же с оптимизацией. Вариант получше хранить уведомления в массиве и показать в одном теге.

const notifications = [ // Все уведомления
  `У вас 10 непрочитанных сообщений`,
  `Пользователь "Альберт Эйнштейн" хочет добавить вас в друзья`,
  `Пожертвуйте церкви 1000р и получайте вип статус на нашем сайте`,
];

const pNotifications = document.querySelector(`p#notifications`); // Блок для показа
if(notifications.length > 0) { // если количество уведомлений больше 0
  let index = 0; // Создаем переменную который показывает индекс уведомления который показывается в данный момент
  setInterval(() => { // запускаем таймер
    pNotifications.innerText = notifications[index]; // В блоке стаим тект уведомления который должен показываться
    index = (index == notifications.length - 1 ? 0 : index + 1); // Увеличиваем индекс, если не в конце, или обнуляем в противном случае
  }, 2000);
}

<p id="notifications"></p>

БЛОГ НА HUSL

Скрывать и отображать блоки с помощью SetInterval

Ответы (1 шт):

Решение

Решение получше