Обобщение скриптов

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 на моем сайте). Кто-нибудь поможет? Благодарю.

javascript,

0

Ответов: 2

JavaScript,

Похожие вопросы

score 0 · Accepted Answer

0 принят

Это то, что вы имеете в виду?

.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>

onclick

Вам не нужны отдельные идентификаторы ваших элементов. thisОбработчик может просто использовать , thisчтобы получить Clicked элемент.

score 0 · Accepted Answer

0

Почему вы используете 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>

Чтобы ответить на фактический вопрос, просто передайте целевой элемент (в данном случае его идентификатор) в качестве аргумента функции.

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

Вы можете, конечно, обобщить это дальше, передав имя класса для переключения, но это зависит от вас.