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>

如何获取div中孩子的索引？

1 个答案: