Javascript img onclick 总是点击所有 img，无法捕捉到点击的正确 img

Question

我使用数组通过 getElementsByClassName 存储我所有的 imgs。

我需要知道哪个 img 被点击或 mouseover/mouseout，所以我使用循环来检查哪个 img 被点击。

但是，我不知道点击了哪个。它总是获取所有的 imgs，而不是我点击的那一个。

我该如何修复它？谢谢!

这是我的 HTML:

    <div class="row">
      <div class="col-md-3 col-6 userPic_area">
        <img class="userPicImgs" src="./view/images/head/head_1.png" alt="" width="100%">
      </div>
      <div class="col-md-3 col-6 userPic_area">
        <img class="userPicImgs" src="./view/images/head/head_2.png" alt="" width="100%">
      </div>
      <div class="col-md-3 col-6 userPic_area">
        <img class="userPicImgs" src="./view/images/head/head_3.png" alt="" width="100%">
      </div>
      <div class="col-md-3 col-6 userPic_area">
        <img class="userPicImgs" src="./view/images/head/head_4.png" alt="" width="100%">
      </div>
      <div class="col-md-3 col-6 userPic_area">
        <img class="userPicImgs" src="./view/images/head/head_5.png" alt="" width="100%">
      </div>
      <div class="col-md-3 col-6 userPic_area">
        <img class="userPicImgs" src="./view/images/head/head_6.png" alt="" width="100%">
      </div>
      <div class="col-md-3 col-6 userPic_area">
        <img class="userPicImgs" src="./view/images/head/head_7.png" alt="" width="100%">
      </div>
      <div class="col-md-3 col-6 userPic_area">
         <img class="userPicImgs" src="./view/images/head/head_8.png" alt="" width="100%">
      </div>
      <div class="col-md-3 col-6 userPic_area">
         <img class="userPicImgs" src="./view/images/head/head_9.png" alt="" width="100%">
      </div>
      <div class="col-md-3 col-6 userPic_area">
         <img class="userPicImgs" src="./view/images/head/head_10.png" alt="" width="100%">
      </div>
      <div class="col-md-3 col-6 userPic_area">
         <img class="userPicImgs" src="./view/images/head/head_11.png" alt="" width="100%">
      </div>
  </div>

这是我的 JS:

function clickUserPicImgs(){

    var UserPicArea = document.getElementsByClassName('userPic_area');
    var UserPicImgs = document.getElementsByClassName('userPicImgs');

    //console.log(UserPicImgs);

    var num;

    function isClicked(num){
        console.log(num);   
    }

    for(var i = 0; i < UserPicImgs.length; i++){

        UserPicImgs[i].onclick = isClicked(i);
    }
}

clickUserPicImgs();

Answer 1

试试这个:

function clickUserPicImgs(num){
  var UserPicArea = document.getElementsByClassName('userPic_area');
  var UserPicImgs = document.getElementsByClassName('userPicImgs');
  for(var i = 0; i < UserPicImgs.length; i++){
    if (num === UserPicImgs[i] ) 
      console.log(i)
    }
}

<div class="row">
  <img class="userPicImgs" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w" alt="" width="20%" onclick="clickUserPicImgs(this)">
  <img class="userPicImgs" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA" alt="" width="20%" onclick="clickUserPicImgs(this)">
  <img class="userPicImgs" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeY54SaYkaOxxyXlu_ng21EMIBZvJjnZBNQAOsIh_0_6Tvu9et" alt="" width="20%" onclick="clickUserPicImgs(this)">
</div>