Как повесить click на каждый элемент nodelist
Как повесить click на каждый элемент nodelist, но так что бы заданное действие происходило на элементе из другого nodelist. В моём коде действие ''display = block'' применяется сразу ко все элементам, а нужно что бы только к одному. Sorry если не особо корректно выражаюсь, я начинающий.
let questions = document.querySelectorAll('.question'); let responses = document.querySelectorAll('.response'); const animate = new Animate(questions, responses); animate.click(); }; class Animate{ constructor(questions, responses){ this.questions = questions; this.responses = responses; }; click = function(){ for (let i of this.questions) { i.addEventListener('click', () => { for (let i of this.responses) { i.style.display = 'block'; }; }); }; }; |
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> |
Часовой пояс GMT +3, время: 03:59. |