如何打开具有相应ID的模式div？

Question

我有一个包含多个模态的页面，当我单击这些模态之一的按钮时，第一个模态总是打开。该代码曾经用于Bootstrap 4.0，但是我从Bootstrap切换到了Tailwind CSS。

模态div的值为id="modal1"。该按钮具有class="modal-open"和data-target="#modal1"。

这是我的JavaScript代码：

var openmodal = document.querySelectorAll('.modal-open')
    for (var i = 0; i < openmodal.length; i++) {
      openmodal[i].addEventListener('click', function(event){
        event.preventDefault()
        toggleModal()
      })
    }

    const overlay = document.querySelector('.modal-overlay')
    overlay.addEventListener('click', toggleModal)

    var closemodal = document.querySelectorAll('.modal-close')
    for (var i = 0; i < closemodal.length; i++) {
      closemodal[i].addEventListener('click', toggleModal)
    }

    document.onkeydown = function(evt) {
      evt = evt || window.event
      var isEscape = false
      if ("key" in evt) {
        isEscape = (evt.key === "Escape" || evt.key === "Esc")
      } else {
        isEscape = (evt.keyCode === 27)
      }
      if (isEscape && document.body.classList.contains('modal-active')) {
        toggleModal()
      }
    };


    function toggleModal () {
      const body = document.querySelector('body')
      const modal = document.querySelector('.modal')
      modal.classList.toggle('opacity-0')
      modal.classList.toggle('pointer-events-none')
      body.classList.toggle('modal-active')
    }

当我用data-target="modal3"单击按钮时，我想打开模式3，现在总是打开模式1。

Answer 1

const modal = document.querySelector('.modal')

此行将始终返回类'modal'的第一个匹配项，因此返回modal 1，前提是它首先出现在标记中。如果希望toggleModal（）在另一个div上进行操作，则必须将div的ID作为参数传递给toggleModal（）。

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector