Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.10.2017, 13:02
Аватар для Nlk
Nlk Nlk вне форума
Кандидат Javascript-наук
Отправить личное сообщение для Nlk Посмотреть профиль Найти все сообщения от Nlk
 
Регистрация: 25.12.2016
Сообщений: 146

Выборка элементов 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";
	}
}
Ответить с цитированием
  #2 (permalink)  
Старый 26.10.2017, 13:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,891

Nlk,
что такое
Сообщение от Nlk
document.x
???
и на всякий случай у querySelectorAll нет метода addEventListener, нужен цикл по всем элементам для addEventListener
Ответить с цитированием
  #3 (permalink)  
Старый 26.10.2017, 13:16
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,623

"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";
}

Последний раз редактировалось Nexus, 26.10.2017 в 13:18.
Ответить с цитированием
  #4 (permalink)  
Старый 26.10.2017, 13:32
Аватар для Nlk
Nlk Nlk вне форума
Кандидат Javascript-наук
Отправить личное сообщение для Nlk Посмотреть профиль Найти все сообщения от Nlk
 
Регистрация: 25.12.2016
Сообщений: 146

Всем огромное спасибо, особенно за столь подробные разъяснения.
Ответить с цитированием
  #5 (permalink)  
Старый 26.10.2017, 15:48
Аватар для Nlk
Nlk Nlk вне форума
Кандидат Javascript-наук
Отправить личное сообщение для Nlk Посмотреть профиль Найти все сообщения от Nlk
 
Регистрация: 25.12.2016
Сообщений: 146

А скобочки для цикла for можно и не ставить?
Ответить с цитированием
  #6 (permalink)  
Старый 26.10.2017, 15:52
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,623

Nlk, лучше ставить.
Если в блоке только 1 операция, то скобки можно опустить.
Ответить с цитированием
  #7 (permalink)  
Старый 26.10.2017, 17:09
Аватар для Nlk
Nlk Nlk вне форума
Кандидат Javascript-наук
Отправить личное сообщение для Nlk Посмотреть профиль Найти все сообщения от Nlk
 
Регистрация: 25.12.2016
Сообщений: 146

Nexus,
Спасибо.
Простите за мою навязчивость, в цикле for переменную i вы внесли в цикл, а в каких случаях могло быть полезно объявлять переменную вне цикла?
Ответить с цитированием
  #8 (permalink)  
Старый 26.10.2017, 17:28
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,623

Nlk, не знаю
Область видимости-то не поменяется от того, что переменная будет объявлена до объявления аргументов цикла.
Если циклов несколько и все юзают одну переменную, то её можно определить до создания цикла или в аргументах первого цикла, а в остальных циклах просто изменять её значение.
Т.е. так:
for(var i=0;i<10;i++){};
for(i=0;i<10;i++){};
Ответить с цитированием
  #9 (permalink)  
Старый 26.10.2017, 18:45
Аватар для Nlk
Nlk Nlk вне форума
Кандидат Javascript-наук
Отправить личное сообщение для Nlk Посмотреть профиль Найти все сообщения от Nlk
 
Регистрация: 25.12.2016
Сообщений: 146

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";
}
Ответить с цитированием
  #10 (permalink)  
Старый 26.10.2017, 19:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,891

Сообщение от Nlk
выключение всех потомков
либо цикл по всем элементам, либо смена класса у родителя
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jquery выборка элементов из переменной winch jQuery 4 15.04.2016 09:09
выборка элементов таблицы и цвет фона xber9 jQuery 10 07.08.2013 19:30
выборка видимых элементов ChikiSt Общие вопросы Javascript 8 01.12.2011 09:26
Выборка элементов у которых есть данные установленные через дата TicTac jQuery 2 02.05.2011 22:45
выборка элементов jetli13 jQuery 9 30.07.2010 12:53