Как лучше реализовать открытие разных попапов одной функцией?

Question

Как лучше компактно написать код для открытия разных блоков с одним классом popup по нажатию на определенную кнопку. Я сам только начинаю изучать JS, и сам код пишу пока что на чистом JS. На codepen примерно реализовал вкратце код, в котором в принципе понятно что надо сделать.

HTML:

<button class='button__open-1'>открыть 1</button>
<button class='button__open-2'>открыть 2</button>
<button class='button__open-3'>открыть 3</button>
<div class="popup">
  <p class="content-1">1</p>
</div>
<div class="popup">
  <p class="content-2">2</p>
</div>
<div class="popup">
  <p class="content-3">3</p>
</div>

CSS:

div {
  background: grey;
}

.popup {
  display: none;
}

.popup_opened {
  display: block;
}

JS:

let btnOne = document.querySelector(".button__open-1");
let btnTwo = document.querySelector(".button__open-2");
let btnThree = document.querySelector(".button__open-3");
let popup = document.querySelector(".popup");

function togglePopup() {
  if (!popup.classList.contains("popup_opened")) {
    popup.classList.toggle("popup_opened");
  } else {
    popup.classList.toggle("popup_opened");
  }
}

btnOne.addEventListener('click' , togglePopup);
// btnTwo.addEventListener('click' , togglePopup);
// btnThree.addEventListener('click' , ??? )

Answer 1

Можно например так:

let btnOne = document.querySelector(".button__open-1");
let btnTwo = document.querySelector(".button__open-2");
let btnThree = document.querySelector(".button__open-3");
let popups = document.querySelectorAll(".popup");

function togglePopup(index){
  popups[index].classList.toggle("popup_opened");
}

btnOne.addEventListener( 'click', ()=> togglePopup(0) );
btnTwo.addEventListener( 'click', ()=> togglePopup(1) );
btnThree.addEventListener( 'click', ()=> togglePopup(2) );

div {
  background: grey;
}

.popup {
  display: none;
}

.popup_opened {
  display: block;
}

<button class='button__open-1'>открыть 1</button>
<button class='button__open-2'>открыть 2</button>
<button class='button__open-3'>открыть 3</button>
<div class="popup">
  <p class="content-1">1</p>
</div>
<div class="popup">
  <p class="content-2">2</p>
</div>
<div class="popup">
  <p class="content-3">3</p>
</div>

Или так:

let btns = document.querySelectorAll(".button__open");
let popups = document.querySelectorAll(".popup");

function togglePopup(){
  let index = Array.from(btns).indexOf(this);
  popups[index].classList.toggle("popup_opened");
}

btns.forEach( btn => btn.addEventListener( 'click', togglePopup ) );

div {
  background: grey;
}

.popup {
  display: none;
}

.popup_opened {
  display: block;
}

<button class='button__open'>открыть 1</button>
<button class='button__open'>открыть 2</button>
<button class='button__open'>открыть 3</button>
<div class="popup">
  <p class="content-1">1</p>
</div>
<div class="popup">
  <p class="content-2">2</p>
</div>
<div class="popup">
  <p class="content-3">3</p>
</div>

БЛОГ НА HUSL

Как лучше реализовать открытие разных попапов одной функцией?

Ответы (1 шт):