Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.10.2019, 20:43
Новичок на форуме
Отправить личное сообщение для zz27.www@yandex.ru Посмотреть профиль Найти все сообщения от zz27.www@yandex.ru
 
Регистрация: 03.10.2019
Сообщений: 1

Как повесить 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';
};
});
};
};
Ответить с цитированием
  #2 (permalink)  
Старый 03.10.2019, 21:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,117

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.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как найти нужный элемент страницы и кликнуть если он имеет тока класс... Александр_1997 Events/DOM/Window 3 18.01.2014 14:34
Как узнать родительский элемент? alex_han Events/DOM/Window 6 06.12.2013 23:01
имея this как удалить элемент из тела html clgs Общие вопросы Javascript 1 13.05.2009 17:55
Как передать элемент в функцию после createElement Oleg NT Общие вопросы Javascript 3 23.06.2008 02:11