Показать сообщение отдельно
  #2 (permalink)  
Старый 03.10.2019, 21:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

zz27.www@yandex.ru,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .response  {
      display: none;
  }
  .response.open  {
      display:  block;
  }
  </style>


</head>

<body>
<div class="question">question1</div>
<div class="question">question2</div>
<div class="question">question3</div>
<div class="question">question4</div>
<div class="question">question5</div>
<div class="response">response1</div>
<div class="response">response2</div>
<div class="response">response3</div>
<div class="response">response4</div>
<div class="response">response5</div>
<script>


class Animate{
    constructor(questions, responses){
            this.questions = questions;
            this.responses = responses;
            this.click();
    }
    click(){
        this.questions.forEach((el,i) => el.addEventListener('click', () => this.responses[i].classList.add('open')))
   }
}
    let questions = document.querySelectorAll('.question');
    let responses = document.querySelectorAll('.response');
    const animate = new Animate(questions, responses);
  </script>
</body>
</html>

Последний раз редактировалось рони, 03.10.2019 в 21:03.
Ответить с цитированием