javascript - odoov13 中最后一次产品图像更改的奇怪问题

Question

我在 javascript 中有这段代码来更改鼠标悬停时的产品图像。它工作正常，但仅适用于两个第一批产品。最后一个被忽略了。

var list = document.querySelectorAll('span[data-oe-id] img');

for (let i = 0; i < list.length; i++) {
    let image = list[i];
    let src = image.src;

    image.addEventListener("mouseover", function (event) {
      console.log(src);
      image.src = "https://media1.giphy.com/media/PfFtibPKBbQrK/giphy.gif?cid=ecf05e47b668e5062e9a561e681f23705e106d8d495b3915&rid=giphy.gif";
    });

    image.addEventListener("mouseout", function (event) {
      image.src = src;
    });
}

这是一个问题的视频 -视频源

我认为这很奇怪，因为只有最后一个产品被忽略了，是的，我试图list.length + 1在循环中做，但没有运气。所有产品都具有相同的 HTML 结构。这是显示中产品视图的结果 HTML 代码 - Pastebin Source

说到我的模板代码，没有什么特别的，只是 card 和 oe_product_cart 类的 xpath

标签： javascripthtmlodoo