无法在一页中插入 03 弹出窗口

Question

我正在尝试在我的页面上实现 03 弹出窗口，但无法这样做。我试图通过为每个弹出窗口分配不同的 ID 来实现这一点。非常感谢任何帮助。这是我的代码 CSS：.fa {  font-size: 50px;  cursor: pointer;  user-select: none;}.fa:hover {  font-size:20px;  transition: 1s ease-out;}/* 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 ;}}这是我的 HTML：<div class="popup" onclick="myFunction()"><i onclick="myFunctions(this)" class="fau fa fa-plus-circle"></i>  <span class="popuptext" id="myPopup">A Simple Popup!</span></div>我的 JS 代码：// When the user clicks on div, open the popupfunction myFunction() {  var popup = document.getElementById("myPopup");  popup.classList.toggle("show");}function myFunctions(x) {  x.classList.toggle("fa-times-circle");}我在这里尝试应用第二个弹出窗口：<div class="popup" onclick="myFunction()"><i onclick="myFunctions(this)" class="fau fa fa-plus-circle"></i>  <span class="popuptext" id="myPopup2">A Simple Popup 2</span></div><script>function myFunction() {  var popup = document.getElementById("myPopup2");  popup.classList.toggle("show");}</script>弹出窗口三也是如此。我被困在这里了。提前致谢

Answer 1

您不能创建多个具有相同名称的函数。但是，一种解决方案是创建一个可重用函数并将单击的元素传递给它。然后在您的弹出式 div 上还添加一个名为的数据属性，data-target该属性包含您要打开的弹出式窗口的 ID。

例如：

<div class="popup" data-target="myPopup" onclick="myFunction(this)">

或者

<div class="popup" data-target="myPopup2" onclick="myFunction(this)">

然后你只需要下面的单一功能，你不必复制它。

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