Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как повесить click на каждый элемент nodelist (https://javascript.ru/forum/events/78560-kak-povesit-click-na-kazhdyjj-ehlement-nodelist.html)

zz27.www@yandex.ru 03.10.2019 20:43

Как повесить 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';
};
});
};
};

рони 03.10.2019 21:00

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.