|
Выборка элементов 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"; } } |
Nlk,
что такое Цитата:
и на всякий случай у querySelectorAll нет метода addEventListener, нужен цикл по всем элементам для addEventListener |
"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"; } |
Всем огромное спасибо, особенно за столь подробные разъяснения.
|
А скобочки для цикла for можно и не ставить?
|
Nlk, лучше ставить.
Если в блоке только 1 операция, то скобки можно опустить. |
Nexus,
Спасибо. Простите за мою навязчивость, в цикле for переменную i вы внесли в цикл, а в каких случаях могло быть полезно объявлять переменную вне цикла? |
Nlk, не знаю :)
Область видимости-то не поменяется от того, что переменная будет объявлена до объявления аргументов цикла. Если циклов несколько и все юзают одну переменную, то её можно определить до создания цикла или в аргументах первого цикла, а в остальных циклах просто изменять её значение. Т.е. так: for(var i=0;i<10;i++){}; for(i=0;i<10;i++){}; |
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"; } |
Цитата:
|
Часовой пояс GMT +3, время: 10:42. |
|