jQuery-.hover（）在不悬停时更改回img=错误的img

我有一个productimages列表，每个产品上有两个不同的图像。第一个在不悬停在图像上时显示，第二个在悬停在图像上时显示

问题是，如果我从悬停在一个productimage上快速转到另一个productimage上，那么第一个productimage会得到第二个Product firstimage，所以productimage是错误的

代码如下所示：

HTML:

我想这与fadeIn/fadeOut有关，因此$（这个）在fadeIn开始之前就已经改变了。

---

有没有更好的方法来避免这个问题？当我删除fadeIn/fadeOut时，问题没有出现，但这是我想要的，因为没有它，传输会很困难。

首先请注意，您的HTML无效

li

元素只能是

ul

的子元素，不能是

div

的子元素

问题的原因是使用了全局

oldImage

变量。最好使用存储在

.product

元素上的'old'

数据

属性，这样在元素之间快速悬停时就不会出现竞争条件。 还请注意，您不需要在每个

mouseenter

/

mouseleave

上重新绑定

load（）

事件。可以将其分别放置在所有必需的图元上。试试这个：

$（'#listingContent.product.loaded'）.load（函数（）{
美元（本）；
});
$（“#listingContent.product”）.hover（函数（）{
var$product=$（本）；
var$image=$product.find（“.loaded”）；
var artnr=$product.data（“artnr”）；
$product.data（“旧”）、$image.attr（“src”）；
$image.fadeOut（150，函数（）{
$（this.attr（“src”，“/pathTo/image/”+artnr+“\u topoffer.jpg”）；
});
}，函数（）{
var$product=$（本）；
var$image=$product.find（“.loaded”）；
$image.fadeOut（150，函数（）{
$（this.attr（“src”），$product.data（“old”）；
});
});

首先请注意，您的HTML无效

li

元素只能是

ul

的子元素，不能是

div

的子元素

问题的原因是使用了全局

oldImage

变量。最好使用存储在

.product

元素上的'old'

数据

属性，这样在元素之间快速悬停时就不会出现竞争条件。 还请注意，您不需要在每个

mouseenter

/

mouseleave

上重新绑定

load（）

事件。可以将其分别放置在所有必需的图元上。试试这个：

$（'#listingContent.product.loaded'）.load（函数（）{
美元（本）；
});
$（“#listingContent.product”）.hover（函数（）{
var$product=$（本）；
var$image=$product.find（“.loaded”）；
var artnr=$product.data（“artnr”）；
$product.data（“旧”）、$image.attr（“src”）；
$image.fadeOut（150，函数（）{
$（this.attr（“src”，“/pathTo/image/”+artnr+“\u topoffer.jpg”）；
});
}，函数（）{
var$product=$（本）；
var$image=$product.find（“.loaded”）；
$image.fadeOut（150，函数（）{
$（this.attr（“src”），$product.data（“old”）；
});
});

而不是执行

window.oldImage = $image.attr("src");

您应该将oldImage存储在元素本身，即某些属性中

$product.data("old", $image.attr("src"));

而不是做

window.oldImage = $image.attr("src");

您应该将oldImage存储在元素本身，即某些属性中

$product.data("old", $image.attr("src"));

---

您好，如果您可以为问题创建小提琴，这将是一个很大的帮助，这样我们可以更容易地解决它。谢谢：）您好，如果您能为这个问题创建小提琴，这将是一个很大的帮助，这样我们就更容易解决它。谢谢：）谢谢你关于ul的说明，我在代码中做了一些修改，删除了一些对这个问题不重要的东西，ul同意了。现在在问题中对其进行了编辑。关于您的解决方案，它似乎是有效的，但现在我得到显示：无作为图像上的内联样式。我认为这与其他插件有关，可能是lazyload。我将尝试找出原因，因为从我在您的答案中可以看出，不完全是因为此代码，对吗？内联

显示：无
将来自
fadeOut（）
，尽管
fadeIn（）
应再次更改此设置。也许值得评论一下上面的部分内容，看看它是什么时候被添加的。感谢关于ul的注释，我在代码中做了一些修改，删除了一些对这个问题不重要的东西，ul也跟着做了。现在在问题中对其进行了编辑。关于您的解决方案，它似乎是有效的，但现在我得到显示：无作为图像上的内联样式。我认为这与其他插件有关，可能是lazyload。我将尝试找出原因，因为从我在您的答案中可以看出，不完全是因为此代码，对吗？内联
显示：无
将来自
fadeOut（）
，尽管
fadeIn（）
应再次更改此设置。也许有必要对上面的部分内容进行注释，看看它是何时添加的。