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

Question

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

我在这里：

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

在鼠标悬停事件上调用的函数是：

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

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

编辑

这是代码的 link，我不得不将它放在 kendo dojo 上，因为我使用的是我修改过的示例..Example

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

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

How to get index of image from ListView on onmouseover event?

jquery

kendo-ui

kendo-listview