脚本概括

Question

我的脚本：

// When the user clicks on <div>, open the popup
function myFunction() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
}
function myFunction0() {
    var popup = document.getElementById("myPopup0");
    popup.classList.toggle("show");
}
function myFunction1() {
    var popup = document.getElementById("myPopup1");
    popup.classList.toggle("show");
}
function myFunction2() {
    var popup = document.getElementById("myPopup2");
    popup.classList.toggle("show");
}
function myFunction3() {
    var popup = document.getElementById("myPopup3");
    popup.classList.toggle("show");
}

<div class="popup" onclick="myFunction()">Click me!
  <span class="popuptext" id="myPopup">Popup text...</span>
</div>

我想针对放置在不同位置的多个弹出窗口推广脚本。实际上，我只能区分href标签（而不是在我的网站中使用div）。 有人帮忙吗？ 谢谢。

Answer 1

在这种情况下，为什么浏览器为您使用JavaScript？

<p>Example from <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary">MDN</a></p>
<details>
    <summary>I have keys but no locks. I have space but no room. You can enter but can't leave. What am I?</summary>
    A keyboard.
</details>

---

要回答实际问题，只需将目标元素（在本例中为ID）作为函数的参数传递即可。

function toggle(id) {
    document.getElementById(id).classList.toggle("show");
}

您当然可以通过传递要切换的类的名称来进一步概括此问题，但这取决于您。

Answer 2

这是你的意思吗？

for (let popup of document.querySelectorAll('.popup')) {
    popup.onclick = function () {
        this.querySelector('.popuptext').classList.toggle('show');
    };
}

.popuptext { display: none }

.popuptext.show { display: inline; }

<div class="popup">Click me 1!
  <span class="popuptext">Popup text 1...</span>
</div>

<div class="popup">Click me 2!
  <span class="popuptext">Popup text 2...</span>
</div>

<div class="popup">Click me 3!
  <span class="popuptext">Popup text 3...</span>
</div>

<div class="popup">Click me 4!
  <span class="popuptext">Popup text 4...</span>
</div>

您不需要在元素上使用单独的ID。 onclick处理程序可以简单地使用this来获取被点击的元素。