Как оптимизировать код js чтобы не обозначать постоянно переменную и каждый раз вызывать функцию по новой

Question

function func(topic) {
  topic.addEventListener('click', (e) => {
    e.preventDefault();
    topic.nextElementSibling.classList.toggle('open-content--show')
  });
}

const topic1 = document.querySelector('#btn1');
func(topic1);

const topic2 = document.querySelector('#btn2');
func(topic2);

.open-button {
  width: 660px;
  padding: 20px;
  border-radius: 3px;
  background-color: #E9E9E9;
}

.open-content {
  width: 660px;
  padding: 0 20px;
  border-radius: 0 0 3px 3px;
  max-height: 0;
  overflow: hidden;
  transition: 1.5s ease max-height;
  background-color: red;
}

.open-button h2 {
  margin: 0;
}

.open-content p {
  margin: 20px 0;
}

.open-content--show {
  max-height: 300px;
}

<div class="open-button" id="btn1">
  <h2>Кнопка 1</h2>
</div>
<div class="open-content">
  <p>Всплывающий текст 1</p>
</div>

<div class="open-button" id="btn2">
  <h2>Кнопка 2</h2>
</div>
<div class="open-content">
  <p>Всплывающий текст 2</p>
</div>

Answer 1

function func(topic) {
  topic.addEventListener('click', (e) => {
    e.preventDefault();
    topic.nextElementSibling.classList.toggle('open-content--show')
  });
}


document.addEventListener("DOMContentLoaded", (event) => {
  for (const elem of document.querySelectorAll('.open-button')){  
      func(elem);
  }
});

.open-button {
    width: 660px;
    padding: 20px;
    border-radius: 3px;
    background-color: #E9E9E9;
}

.open-content {
  width: 660px;
  padding: 0 20px;
  border-radius: 0 0 3px 3px;
  
  max-height: 0;
  overflow: hidden;
  transition: 1.5s ease max-height;
  background-color: red;
}

.open-button h2 {
  margin: 0;
}

.open-content p {
  margin: 20px 0;
}

.open-content--show {
  max-height: 300px;
}

<div class="open-button" id="btn1">
    <h2>Кнопка 1</h2>
</div>
<div class="open-content">
    <p>Всплывающий текст 1</p>
</div>

<div class="open-button" id="btn2">
    <h2>Кнопка 2</h2>
</div>
<div class="open-content">
    <p>Всплывающий текст 2</p>
</div>

но правильнее было бы где-то навешивать, а действие делать в другой функции... т.е.

function func(topic) {
    topic.nextElementSibling.classList.toggle('open-content--show')
}        

for (const elem of document.querySelectorAll('.open-button')){  
  elem.addEventListener('click', (e) => {
    e.preventDefault();
    func(e.target);        
  });
}

ну и не ясно нафига тут e.preventDefault();

Answer 2

Как оптимизировать код

Если использовать некий единый родитель - можно обойтись одним обработчиком.

document.querySelector('section').addEventListener('click', (e) => {
  const o = e.target.closest('.open-button')
  if (!o) return
  e.preventDefault();
  o.nextElementSibling.classList.toggle('open-content--show')
});

.open-button {
  width: 660px;
  padding: 20px;
  border-radius: 3px;
  background-color: #E9E9E9;
}

.open-content {
  width: 660px;
  padding: 0 20px;
  border-radius: 0 0 3px 3px;
  max-height: 0;
  overflow: hidden;
  transition: 1.5s ease max-height;
  background-color: red;
}

.open-button h2 {
  margin: 0;
}

.open-content p {
  margin: 20px 0;
}

.open-content--show {
  max-height: 300px;
}

<section>
  <div class="open-button" id="btn1">
    <h2>Кнопка 1</h2>
  </div>
  <div class="open-content">
    <p>Всплывающий текст 1</p>
  </div>

  <div class="open-button" id="btn2">
    <h2>Кнопка 2</h2>
  </div>
  <div class="open-content">
    <p>Всплывающий текст 2</p>
  </div>
</section>

БЛОГ НА HUSL

Как оптимизировать код js чтобы не обозначать постоянно переменную и каждый раз вызывать функцию по новой

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