Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.08.2023, 00:18
Аспирант
Отправить личное сообщение для Leon2110 Посмотреть профиль Найти все сообщения от Leon2110
 
Регистрация: 04.07.2016
Сообщений: 76

Работает только клик по первому элементу
Здравствуйте, проблема такая: есть сайт на bootstrap, я вывожу список материалов, у каждого материала есть кнопка "поделиться", при клике на нее должно сверху браузера выходить уведомление, что ссылка скопирована. Я сделал эти уведомления на Bootstrap Alerts, вот как это работает, все просто:

На сайте, сверху есть блок для показа уведомлений (пустой пока)
<div id="liveAlertPlaceholder" class="alert-message"></div>


В каждом материале (их 10шт на странице) есть кнопка с id liveAlertBtn (я понимаю что нельзя один id 10 раз, но пока так:
<a href="##" class="share" id="liveAlertBtn">Поделиться</a>


В js из документации бутстрапа:
var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')

function alert(message, type) {
    var wrapper = document.createElement('div')
    wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible fade show" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'

    alertPlaceholder.append(wrapper)
}

if (alertTrigger) {
    alertTrigger.addEventListener('click', function () {
        alert('Ссылка успешно скопирована в буфер обмена и отправлена в диалог между нами.', 'success')
        // Скрываем алерт через 4 секунды
        window.setTimeout(function () { $(".alert-success").alert('close'); }, 4000);
    })
}


Нужно думаю как-то изменить js, (возможно 2 и 12 строки js) чтобы работало не с id getElementById, а с классом share например (он там есть). Туплю не получается исправить.

По итогу, клик по первому элементу показывает уведомления, клик по остальным 9 элементам на странице ничего не показывает и ошибку не выводит.

Последний раз редактировалось Leon2110, 18.08.2023 в 00:22.
Ответить с цитированием
  #2 (permalink)  
Старый 18.08.2023, 06:33
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,682

Сообщение от Leon2110
(я понимаю что нельзя один id 10 раз, но пока так:
Поэтому пока и не работает. getElementById находит только первый элемент с таким ид.
По классу можно найти элемент используя querySelector. Но он тоже найдет только первый. Не видя всей разметки, как там у вас организованы блоки ваших материалов, подсказать трудно.
Ответить с цитированием
  #3 (permalink)  
Старый 18.08.2023, 11:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

Leon2110,
var alertPlaceholder = document.getElementById('liveAlertPlaceholder')

        function alert(message, type) {
            var wrapper = document.createElement('div')
            wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible fade show" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'

            alertPlaceholder.append(wrapper)
        }

        document.addEventListener('click', function(event) {
            if (!event.target.closest('[id=liveAlertBtn]')) return;
            alert('Ссылка успешно скопирована в буфер обмена и отправлена в диалог между нами.', 'success')
            // Скрываем алерт через 4 секунды
            window.setTimeout(function() {
                $(".alert-success").alert('close');
            }, 4000);
        })
Ответить с цитированием
  #4 (permalink)  
Старый 18.08.2023, 11:42
Аспирант
Отправить личное сообщение для Leon2110 Посмотреть профиль Найти все сообщения от Leon2110
 
Регистрация: 04.07.2016
Сообщений: 76

рони, Спасибо, это работает как нужно
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
не срабатывает клик по дочернему элементу romveld Элементы интерфейса 1 06.06.2020 15:30
клик и событие работает клик и это событие не работает Trues Элементы интерфейса 3 27.05.2015 10:28
AddClass к каждому первому элементу myocean jQuery 7 03.02.2013 13:44
Скрипт меню не работает только в Firefox somatic Firefox/Mozilla 2 28.07.2009 03:23
Не работает AppendChild для div, причём только в IE _Kpot_ Internet Explorer 5 12.02.2009 10:55