используя javascript queryselectorall вместо селектора jquery

74
6

Я хочу переписать этот jQuery в чистом JavaScript:

var gallery1 = $('.gallery a');

gallery1.click(function(event){
event.preventDefault();
console.log('onclick');
});

Попытавшись понять это, я закончил что-то вроде этого:

var gallery = document.querySelector('.gallery a');

gallery.onclick = function(event){
event.preventDefault();
console.log('onclick');
};

Но он работает только с первым якорем ul.

Когда я пытаюсь использовать querySelectorAll('.gallery a') он ничего не делает.

Я новичок в JavaScript. Может ли кто-нибудь помочь мне разобраться?

HTML

<ul class="gallery" id="gallery">
<li class="">
<a href="img/gallery/gallery1.jpg" class="" id="anchor">
<img src="img/gallery/gallery1.jpg" alt="image 1" class="img">
</a>
</li>
<li class="">
<a href="img/gallery/gallery2.jpg" class="">
<img src="img/gallery/gallery2.jpg" alt="image 1" class="img">
</a>
</li>
<li class="">
<a href="img/gallery/gallery3.jpg" class="">
<img src="img/gallery/gallery3.jpg" alt="image 1" class="img">
</a>
</li>
<li class="">
<a href="img/gallery/gallery4.jpg" class="">
<img src="img/gallery/gallery4.jpg" alt="image 1" class="img">
</a>
</li>
<li class="">
<a href="img/gallery/gallery5.jpg" class="">
<img src="img/gallery/gallery5.jpg" alt="image 1" class="img">
</a>
</li>
</ul>

спросил(а) 2017-02-26T15:14:00+03:00 4 года назад
1
Решение
85

Вам нужно обработать массив-ноделист из querySelectorAll():

var gallery = document.querySelectorAll('.gallery a');

gallery.forEach(function(item) {
item.onclick = function(event){
event.preventDefault();
console.log('onclick');
};
});

ответил(а) 2017-02-26T15:21:00+03:00 4 года назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема