Question

我使用一个数组存储imgs的全部getElementsByClassName。

我需要知道单击了哪个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>

Javascript img onclick始终单击所有img，无法捕获已单击的正确img

1 个答案: