使用 javascript queryselectorall 而不是 jquery 选择器

Question

我想用纯 JavaScript:

重写这个 jQuery

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>

Answer 1

您需要处理来自 querySelectorAll():

的类似数组的节点列表

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

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

使用 javascript queryselectorall 而不是 jquery 选择器

using javascript queryselectorall instead of jquery selector

javascript

jquery

jquery-selectors

selectors-api