javascript - 如何定位这段 Javascript 代码中的子元素？

Question

我有一个带有列表的网站，我想将其设置为当您单击某个项目时会出现一个弹出窗口。

我在这里关注这个 - https://www.w3schools.com/howto/howto_js_popup.asp

这是我的 HTML 代码 -

              <div class="popup" onclick="myFunction()">
                <ul class="matchup">
                  <li class="team team-top">2015 Clayton Kershaw</li>
                  <li class="team team-bottom">2017 Jose Altuve</li>
                </ul>
                <div class="popuptext" id="myPopup">
                  <h1>Popup Text</h1>
                </div>
              </div>

和我的 JS -

function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}

弹出窗口可以工作，但问题是页面上还有 30 个其他列表，我不想为每个列表创建一个函数。

如何编写代码以使其针对 UL 类“matchup”的子元素？

Answer 1

首先，即使您可以打开弹出窗口来单击每个列表项，您的工作也不会结束。

您将需要制作弹出窗口来显示每个列表项的不同内容，并且您很快就会意识到您需要强大的工具来制作您想要的内容。

有很多工具，最简单的一个是 Vue.js

但是，我只是让您知道如何在没有 Vue.js 的情况下打开弹出窗口。如果您对此感兴趣，请在他们的网站上进行 self 学习。

首先，从 .popup 元素中删除 onclick 属性。

<div class="popup">
  <ul class="matchup">
    <li class="team team-top">2015 Clayton Kershaw</li>
    <li class="team team-bottom">2017 Jose Altuve</li>
  </ul>
  <div class="popuptext" id="myPopup">
    <h1>Popup Text</h1>
  </div>
</div>

然后，将您的 JavaScript 代码替换为此。

// this `togglePopup` function works similarly with your `myFunction` function, but it caches the element selecting result for better performance.
const togglePopup = (() => {
  const element = document.querySelector('#myPopup');
  console.log(element)
  return () => {
    element.classList.toggle("show");
  }
})();

// this finds all `li` elements inside `.matchup` element and make to execute `togglePopup` when one of those are clicked by user.
document.querySelectorAll('.matchup li').forEach(e => {
  e.addEventListener('click', () => {
    togglePopup()
  })
})