使用动态文本创建 HTML/Javascript 模式

Question

我正在学习 Javascript 我的项目包含 3 个打开模式的按钮。一切正常，但我想重用模态并根据单击的按钮替换模态文本。

我的HTML如下：

    <body>
  <button class="show-modal" id="btn-1">Show modal 1</button>
  <button class="show-modal" id="btn-2">Show modal 2</button>
  <button class="show-modal" id="btn-3">Show modal 3</button>

  <div class="modal hidden">
    <button class="close-modal">&times;</button>
    <h1>Modal Header Content</h1>
    <p class="hidden btn-1 text">
      This is modal 1 text content
    </p>
    <p class="btn-2 hidden text">This is modal 2 text</p>
    <p class="btn-3 hidden text">This is modal 3 text</p>
  </div>
  <div class="overlay hidden"></div>

  <script src="script.js"></script>
</body>

在我的 Javascript 文件中，我创建了变量来访问 HTML:

的各个部分

    // get selector and store in variable for repeated use
const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
//since button all have same class of show-modal, have to use querySelectorAll
const btnsOpenModal = document.querySelectorAll('.show-modal');
const text = document.querySelectorAll('.text');
console.log(text);

然后当我点击按钮时，模式出现，但我不能改变文本。我的想法是获取按钮 ID（我得到），如果该值包含在元素 class 列表中，则删除隐藏的 class。但它不起作用，所以有些地方我不明白。

    for (let i = 0; i < btnsOpenModal.length; i++) {
  btnsOpenModal[i].addEventListener('click', function () {
    // console.log(btnsOpenModal[i].id);
    console.log(btnsOpenModal[i]);
    let modalText = btnsOpenModal[i].id;

    console.log(modalText);
    if (text.classList.contains(modalText)) {
      text.classList.remove('hidden');
    }

    modal.classList.remove('hidden');
    overlay.classList.remove('hidden');
  });
}

如有任何帮助，我们将不胜感激！也许我也不能用 javascript 做到这一点，这很好，但我的直觉告诉我这是可以做到的。

谢谢！！

Answer 1

您的代码存在问题，您试图访问整个 querySelectorAll 数组，而不是您感兴趣的单个元素。请参阅下面的代码以获取解决方法的示例这个：

for (let i = 0; i < btnsOpenModal.length; i++) {
  btnsOpenModal[i].addEventListener('click', function () {
    let modalText = btnsOpenModal[i].id;

    if (text[i].classList.contains(modalText)) {
      text[i].classList.remove('hidden');
    }

    modal.classList.remove('hidden');
    overlay.classList.remove('hidden');
  });
}

使用动态文本创建 HTML/Javascript 模式

Creating HTML/Javascript Modal with dynamic text

javascript

simplemodal

nodelist