Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Выборка элементов querySelectorAll (https://javascript.ru/forum/events/71107-vyborka-ehlementov-queryselectorall.html)

Nlk 26.10.2017 13:02

Выборка элементов querySelectorAll
 
Ребят, всем привет!
Пожалуйста укажите на ошибку в коде.
Почему при клике на выбранных элементах они не пропадают?
<h1 class="oli">вариант 1</h1>
<p class="sd">вариант 2</p>
<p class="oli">вариант 3</p>

var x = document.querySelectorAll('.oli');
document.x.addEventListener("click", myFunction);

function myFunction() {
	var i;
	for (i = 0; i < x.length; i++) {
		x[i].style.display = "none";
	}
}

рони 26.10.2017 13:11

Nlk,
что такое
Цитата:

Сообщение от Nlk
document.x

???
и на всякий случай у querySelectorAll нет метода addEventListener, нужен цикл по всем элементам для addEventListener

Nexus 26.10.2017 13:16

"x" - коллекция элементов, по сути массив.
У массива нет метода "addEventListener", а у "document" не появилось свойство "x" от того, что вы создали переменную.
Чтобы повесить обработчик на каждый элемент коллекции, нужно пробежаться по коллекции в цикле.
В обработчике события "this" - ссылка на элемент, на котором произошло событие.

var x = document.querySelectorAll('.oli');
for(var i=0;i<x.length;i++)
    x[i].addEventListener("click", myFunction);

function myFunction() {
    this.style.display = "none";
}

Nlk 26.10.2017 13:32

Всем огромное спасибо, особенно за столь подробные разъяснения.

Nlk 26.10.2017 15:48

А скобочки для цикла for можно и не ставить?

Nexus 26.10.2017 15:52

Nlk, лучше ставить.
Если в блоке только 1 операция, то скобки можно опустить.

Nlk 26.10.2017 17:09

Nexus,
Спасибо.
Простите за мою навязчивость, в цикле for переменную i вы внесли в цикл, а в каких случаях могло быть полезно объявлять переменную вне цикла?

Nexus 26.10.2017 17:28

Nlk, не знаю :)
Область видимости-то не поменяется от того, что переменная будет объявлена до объявления аргументов цикла.
Если циклов несколько и все юзают одну переменную, то её можно определить до создания цикла или в аргументах первого цикла, а в остальных циклах просто изменять её значение.
Т.е. так:
for(var i=0;i<10;i++){};
for(i=0;i<10;i++){};

Nlk 26.10.2017 18:45

Nexus,
Спасибо за ваши ответы, последний раз попрошу вашего внимания.
Скажите а можно реализовать выключение всех потомков схожим образом:
var x = document.querySelectorAll('.oli');
for(var i=0;i<x.length;i++)
    x[i].addEventListener("click", myFunction);

function myFunction() {
    this.childNodes.style.display = "none";
}

рони 26.10.2017 19:05

Цитата:

Сообщение от Nlk
выключение всех потомков

либо цикл по всем элементам, либо смена класса у родителя


Часовой пояс GMT +3, время: 10:42.