使用javascirpt queryselectorall代替jQuery选择

Question

我想改写这个jQuery的纯的JavaScript：

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

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

：

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

gallery1.click(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'); 
    }; 
});