在一页上添加 3 次点击

Question

我正在尝试将 3 onclick 弹出窗口添加到一页。 但似乎只要我添加第二个，第一个就会停止工作。 我将它们重新命名为不同的名称，但仍然无法正常工作。 请帮忙。

 <script> // When the user clicks on div, open the popup function myFunction() { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); } </script> <script> // When the user clicks on div, open the popup function myFunction() { var popup = document.getElementById("mypopup"); popup.classList.toggle("show"); } </script>

 <span class="tooltip" onclick="myFunction()"> <div class="amount">$234.41</div> <span class="tooltiptext" id="myPopup">This is how much money our community has raised to help provide meals and support to animal charities in our local communities.</span> </span> <:----------------------------------------------------------------------------------------------------------------------------------- Fur Baby Of The Month --> <span class="tooltips" onclick="myFunction()"> <div class="furbm"> <img src="https.//www.capebretoncares.com/images/icons/amazon:png"> </br> </div> <span class="tooltipstext" id="mypopup">Fur Baby Of The Month </br> <img src="https.//www.capebretoncares.com/images/search-icons/duck.png"> </br> congratulations "Fluffy" </span> </span>

Answer 1

您的 span 内容无效 HTML - 您不能将 div 包装在 span 中 - </br>是错误的方式 - 如果您想要 XHTML 斜杠，则应该是<br/>

这是推荐的方式

1. 以容器为目标（委托/委派）
2. 使用可点击元素的 class
3. 使用 data- 属性命名单击时要访问的元素
   或者通过将每个项目包装在另一个容器 div 中来使用错误寻址，并使用tgt.closest(".parentClass").querySelector(".popupClass")访问弹出窗口

在这里，我使用了数据属性——如您所见，在这种情况下，弹出窗口是 span 还是 div 并不重要。

 window.addEventListener("load", function() { // on page load document.getElementById("container").addEventListener("click", function(e) { // clicking anything in the container const tgt = e.target; if (tgt.classList.contains("tooltip")) { // we clicked a tooltip const show = tgt.dataset.pop; // getting the data-pop content document.getElementById(show).classList.toggle("hide"); } }) })

 .hide { display: none; }

 <div id="container"> <span class="tooltip" data-pop="myPopup1">Look</span> <div class="amount">$234.41</div> <span class="tooltiptext hide" id="myPopup1">This is how much money our community has raised to help provide meals and support to animal charities in our local communities.</span> <hr/> <span class="tooltip" data-pop="myPopup2">Look</span> <div class="furbm"> <img src="https://www.capebretoncares.com/images/icons/amazon.png"> </div> <div class="tooltipstext hide" id="myPopup2">Fur Baby Of The Month <img src="https://www.capebretoncares.com/images/search-icons/duck.png"> congratulations "Fluffy" </div> </div>

如果你想在点击其他地方时关闭，你可以再次使用 addEventListener 并测试目标不是弹出窗口而不是弹出链接，然后关闭所有打开的弹出窗口。 该代码有点复杂