html - How to determine which child image was clicked within a parent in Javascript - Stack Overflow

admin管理员组

文章数量:1350044

I have the following code which prompts the user to select an image:

<div id="frame1" class = "quizFrame quizFrame1">
  <p>Which image do you identify with?</p>
  <img class = "quizImg" src="images/person1.jpg" alt="" onclick ="ShowNext();" >
  <img class = "quizImg" src="images/person2.jpg" alt="" onclick = "ShowNext();">
  <img class = "quizImg"src="images/person3.jpg" alt="" onclick = "ShowNext();">
  <img class = "quizImg" src="images/person4.jpg" alt="" onclick = "ShowNext();">
</div>

Upon clicking the image I would like to determine which image was clicked.

Is there a way to retrieve the index of the image somehow ? (for instance if person1 was clicked the index would be 0 or 1)?

I know I can assign IDs to each image but would like to know if there is an easier route.

I have the following code which prompts the user to select an image:

<div id="frame1" class = "quizFrame quizFrame1">
  <p>Which image do you identify with?</p>
  <img class = "quizImg" src="images/person1.jpg" alt="" onclick ="ShowNext();" >
  <img class = "quizImg" src="images/person2.jpg" alt="" onclick = "ShowNext();">
  <img class = "quizImg"src="images/person3.jpg" alt="" onclick = "ShowNext();">
  <img class = "quizImg" src="images/person4.jpg" alt="" onclick = "ShowNext();">
</div>

Upon clicking the image I would like to determine which image was clicked.

Is there a way to retrieve the index of the image somehow ? (for instance if person1 was clicked the index would be 0 or 1)?

I know I can assign IDs to each image but would like to know if there is an easier route.

• javascript
• html

Share Improve this question Follow edited Dec 17, 2016 at 11:23 Naveed Ramzan 3,59333 gold badges2626 silver badges3131 bronze badges asked Dec 17, 2016 at 9:30 DannyMosheDannyMoshe 6,28577 gold badges3636 silver badges5757 bronze badges 2

• stackoverflow./questions/13658021/… – sinisake Commented Dec 17, 2016 at 9:34
• Event.target points to the target, element triggering the event. – ste2425 Commented Dec 17, 2016 at 9:36

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

Use Array#indexOf to find the index of a clicked image in the array of all images:

var images = [].slice.call(document.querySelectorAll('#frame1 > .quizImg'), 0); // get all images inside frame1, and convert to array

function ShowNext(img) {   
  console.log(images.indexOf(img)); // find the index of the clicked image inside the array
}

<div id="frame1" class = "quizFrame quizFrame1">
  <p>Which image do you identify with?</p>
  <img class = "quizImg" src="https://placehold.it/60x60" alt="" onclick ="ShowNext(this);" >
  <img class = "quizImg" src="https://placehold.it/60x60" alt="" onclick = "ShowNext(this);">
  <img class = "quizImg"src="https://placehold.it/60x60" alt="" onclick = "ShowNext(this);">
  <img class = "quizImg" src="https://placehold.it/60x60" alt="" onclick = "ShowNext(this);">
</div>

---

Or using .addEventListener() with event delegation:

var frame1 = document.getElementById('frame1'); // find the images container
var images = [].slice.call(frame1.querySelectorAll('.quizImg'), 0); // get all images inside frame1, and convert to array

frame1

 // add an event listener that will handle all clicks inside frame1
  .addEventListener('click', function(e) {
  
   // find the index of the clicked target from the images array
  var index = images.indexOf(e.target)
  
  if(index !== -1) { // if no image was clicked
    console.log(index);
  }
});

<div id="frame1" class = "quizFrame quizFrame1">
  <p>Which image do you identify with?</p>
  <img class = "quizImg" src="https://placehold.it/60x60" alt="">
  <img class = "quizImg" src="https://placehold.it/60x60" alt="">
  <img class = "quizImg"src="https://placehold.it/60x60" alt="">
  <img class = "quizImg" src="https://placehold.it/60x60" alt="">
</div>

Click event has .target attribute that shows actual clicked element.

document.getElementById("frame1").addEventListener("click", function(event) {
  // display the current click count inside the clicked div
  event.target.className = "clicked";
}, false);

function ShowNext() {

}

.clicked {
  border: 2px solid red;
}
img {
  width: 23%;
  float: left;
}

<div id="frame1" class="quizFrame quizFrame1">
  <p>Which image do you identify with?</p>
  <img class="quizImg" src="https://placeholdit.imgix/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="" onclick="ShowNext();">
  <img class="quizImg" src="https://placeholdit.imgix/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="" onclick="ShowNext();">
  <img class="quizImg" src="https://placeholdit.imgix/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="" onclick="ShowNext();">
  <img class="quizImg" src="https://placeholdit.imgix/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="" onclick="ShowNext();">
</div>

$(document).ready(function(){
    alert($(this).attr('src'); // it will return source : images/personal1.jpg if clicked on first one
});

Pass this with every function call:

<div id="frame1" class = "quizFrame quizFrame1">
    <p>Which image do you identify with?</p>
    <img class = "quizImg" src="images/person1.jpg" alt="" onclick ="ShowNext(this);" >
    <img class = "quizImg" src="images/person2.jpg" alt="" onclick = "ShowNext(this);">
    <img class = "quizImg"src="images/person3.jpg" alt="" onclick = "ShowNext(this);">
    <img class = "quizImg" src="images/person4.jpg" alt="" onclick = "ShowNext(this);">
</div>

Here is Javascript code to retrieve value from tag:

var Imgs = [].slice.call(document.getElementById('frame1').children);
function ShowNext(element){
    console.log(Imgs.indexOf(element));
}

Using addEventListener() on parent element so that the click event is delegated to it's children (images). The handler is function indentify() which uses the document.images property to collect all the images. Next it iterates through a for loop and finds the exact image clicked by using the event.target property to pare the index number of the clicked element.

SNIPPET

var f1 = document.getElementById('frame1');

f1.addEventListener('click', identify, false);

function identify(e) {
  for (let i = 0; i < document.images.length; i++) {
    if (document.images[i] === e.target) {
      console.log(i);
    }
  }
}

<div id="frame1" class="quizFrame quizFrame1">
  <p>Which image do you identify with?</p>
  <img class="quizImg" src="http://placehold.it/50x50/000/fff?text=1" alt="">
  <img class="quizImg" src="http://placehold.it/50x50/000/fff?text=2" alt="">
  <img class="quizImg" src="http://placehold.it/50x50/000/fff?text=3" alt="">
  <img class="quizImg" src="http://placehold.it/50x50/000/fff?text=4" alt="">
</div>

本文标签： htmlHow to determine which child image was clicked within a parent in JavascriptStack Overflow