如何在div中获取孩子的索引？ [复制]

Question

我有三个需要变换样式的图像。生成此样式的值并保存在数组中。

var img = [1.jpg, 2.jpg, 3.jpg]
var translateHoverValues = [60,120,180]

我在悬停时获得了图像的 id，我不知道如何根据 id 从数组中选择所需的值。 也许 div 中有某种 img 的索引/位置编号，所以我可以选择正确的值形式数组。

悬停时我会得到图像的 id，如下所示：

onmouseover="imgHover(this)" //html
function imgHover(obj){      //JS
  var idImg = obj.id       //if logged gives back: img1, img2 or img3
  var z = document.getElementById(idImg) //hovered image
  z.style.transform = 'translateX(-'+translateHoverValues[n]+'px)'
  ......
}

我的研究： https://www.w3schools.com/jsref/prop_element_children.asp 使用children.length，我可以看出我的 div 的长度为 3，因为 3 张图片。 使用children[2]我们可以选择特定的孩子，但是我们如何找出悬停图像的索引？

谢谢。

Answer 1

你可以像下面这样使用indexOf()：

var images = Array.prototype.slice.call(document.getElementById('container').children);
images.forEach(function(el){
  el.addEventListener('mouseover', getIndex);
});
function getIndex(){
  //console.clear(); // clear the console
  var index = images.indexOf(this);
  document.getElementById('index').textContent = 'The index of the image is: ' + index;
}

<div id="container">
  <img src="img_1.jpg" alt="Image 1">
  <img src="img_2.jpg" alt="Image 2">
  <img src="img_3.jpg" alt="Image 3">
</div>
<div id="index"></div>