Question

我有以下代码提示用户选择图像：

<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>

单击图像后，我想确定单击了哪个图像。

有没有办法以某种方式检索图像的索引？（例如，如果单击person1，索引将为0或1）？

我知道我可以为每张图片分配ID，但想知道是否有更简单的路线。

Answer 1

使用Array#indexOf查找所有图像数组中单击图像的索引：

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>

或者将.addEventListener()与事件委派一起使用：

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>

Answer 2

点击事件具有显示实际点击元素的.target属性。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

Answer 4

通过每个函数调用传递：

<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>

以下是从代码中检索值的Javascript代码：

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

Answer 5

在父元素上使用addEventListener()，以便将click事件委托给它的子元素（图像）。处理程序是函数indentify()，它使用document.images属性来收集所有图像。接下来，它遍历for循环并使用event.target属性查找单击的确切图像，以比较所单击元素的索引号。

<强>段

＆＃13;

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);
    }
  }
}

＆＃13;

<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>

＆＃13;

如何确定在Javascript中在父级中单击了哪个子图像

5 个答案: