如何在单页面中创建多个div弹窗？现有代码仅能打开第一个

嘿，我一眼就看出问题所在啦！你现在的myFunction()函数里硬编码了只获取id="myPopup"的元素，不管点击哪个弹窗容器，它只会切换第一个弹窗的显示状态——这就是为啥只有第一个弹窗能正常工作~

下面给你两种简单的修改方案，都能完美解决多弹窗的问题：

方案一：利用事件上下文（最推荐，扩展性强） #

这个方案不需要给每个弹窗写单独的函数，就算后续加更多弹窗也不用改代码，非常灵活。

修改步骤： #

1. 把每个弹窗容器的onclick属性改成传递事件对象：onclick="myFunction(event)"
2. 修改JS函数，通过事件对象找到当前点击的弹窗容器，再定位到它内部的弹窗内容元素。

修改后的完整代码： #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
</style>
</head>
<body style="text-align:center">

<h2>Popup</h2>

<div class="popup" onclick="myFunction(event)">Popup 1!
  <span class="popuptext">Popup 1 Content</span>
</div>

&nbsp; &nbsp; &nbsp;

<div class="popup" onclick="myFunction(event)">Popup 2!
  <span class="popuptext">Popup 2 Content!</span>
</div>

<script>
// When the user clicks on div, open the popup
function myFunction(event) {
  // 获取当前点击的弹窗容器
  const popupContainer = event.currentTarget;
  // 找到容器内的弹窗内容元素
  const popupText = popupContainer.querySelector('.popuptext');
  // 切换显示状态
  popupText.classList.toggle("show");
}
</script>

</body>
</html>

关键说明： #

• event.currentTarget：指向当前绑定了点击事件的.popup容器，确保我们操作的是用户实际点击的那个弹窗
• querySelector('.popuptext')：从当前容器内部查找弹窗内容元素，避免全局查找导致的错误

方案二：给每个弹窗绑定独立函数（适合少量弹窗） #

如果你的弹窗数量很少，也可以给每个弹窗写单独的函数，比如：

<!-- 修改HTML部分的点击事件 -->
<div class="popup" onclick="myFunction1()">Popup 1!
  <span class="popuptext" id="myPopup">Popup 1 Content</span>
</div>

<div class="popup" onclick="myFunction2()">Popup 2!
  <span class="popuptext" id="myPopup1">Popup 2 Content!</span>
</div>

<!-- 修改JS部分 -->
<script>
function myFunction1() {
  var popup = document.getElementById('myPopup');
  popup.classList.toggle("show");
}

function myFunction2() {
  var popup = document.getElementById('myPopup1');
  popup.classList.toggle("show");
}
</script>

不过这种方案的缺点很明显——如果要加更多弹窗，就得写更多重复的函数，不如方案一灵活。

内容的提问来源于stack exchange，提问作者a. finch