jquery - 如何在 onmouseover 事件中从 ListView 获取图像索引？

Question

我有一个显示图像的 ListView，单击它后我可以获得图像的索引，但是当我只将鼠标悬停在图像上时无法获得索引。

这就是我所在的位置：

<img onmouseover="ImageListHover(this, $(this));" id="#=ItemID#" src="../Images/CatalogImages/#= CheckForImagesURL(FilePreview) #" alt="#: ItemName # image" />

在 mouseover 事件上调用的函数是：

function ImageListHover(a, b) {
    console.log("index from a is: " + a.index());
    console.log("index from b is: " + b.index());
}

我正在传递 this 和 $(this) 以查看是否可以从其中任何一个中获取索引，但无济于事。

编辑

这是代码的链接，我不得不将它放在剑道道场上，因为我使用的是我修改过的示例。示例

Answer 1

问题是因为img您要定位的元素不是同级元素，因此它们都在0各自容器中的索引处。

要解决此问题，请提供一个选择器index()，明确指定要在其中检索索引的集合：

function ImageListHover(a, b) {
  console.log("index from b is: " + b.index('.product img'));
}

另请注意，使用on*事件属性是一种过时的技术，应避免使用。改用不显眼的事件处理程序：

$(function() {
  // your kendo setup here...

  $('.product img').on('mouseenter', function() {
    console.log($(this).index('.product img'));
  });
});