Как сделать несколько ссылок на один Toasts в Bootstrap?

Question

[Алексей Королёв]

Мне нужно вывести одно сообщение при нажатии определённые ссылки на сайте. Однако из такой структуры работает только первая кнопка. Как сделать, чтобы все кнопки ссылались на один Toasts?

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>


var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', function () {
    var toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Answer 1

[Сергей]

Идентификатор на сайте должен иметь уникальное имя, поэтому id="liveToastBtn" x3 - это уже неправильно. Замените id на класс, например, js-toast-trigger. Далее повесьте обработчик на каждый элемент в цикле (да и нечего при каждом клике создавать новый экземпляр всплывающего окна, поэтому вынесем его наружу):

const toastTriggers = document.querySelectorAll('.js-toast-trigger');
const toastLiveExample = document.getElementById('liveToast');
const toast = new bootstrap.Toast(toastLiveExample);

if (toastTriggers.length) {
  toastTriggers.forEach(function(trigger) {
    trigger.addEventListener('click', function() {
      toast.show();
    });
  });
}