javascript - 如何在点击时使用 Jquery 定位所有元素

Question

只有第一个元素被点击，而不是全部，如何获得所有元素的警报。

Jsfiddle

var btn = document.querySelector(".box i");

btn.onclick = function () {
  alert('hello');
}

<div class="box">
  <i class="fa fa-address-book-o" aria-hidden="true"></i>
  <i class="fa fa-address-book-o" aria-hidden="true"></i>
  <i class="fa fa-address-book-o" aria-hidden="true"></i>
  <i class="fa fa-address-book-o" aria-hidden="true"></i>
</div>
    
    

Answer 1

尝试使用 querySelectorAll 进行全选，然后将 onclick 吸引到所有元素

var btnlist = document.querySelectorAll(".box i");
btnlist.forEach(element =>{element.onclick = function () {
  alert('hello');
}});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="box">
  <i class="fa fa-address-book-o" aria-hidden="true"></i>
  <i class="fa fa-address-book-o" aria-hidden="true"></i>
  <i class="fa fa-address-book-o" aria-hidden="true"></i>
  <i class="fa fa-address-book-o" aria-hidden="true"></i>
</div>