为什么 jQuery each() 函数中的全局变量破坏了我的翻转效果？

Question

我正在尝试通过 jQuery 实现翻转效果，当我将鼠标悬停在黑白图像上时，它会被彩色图像取代，当我移出图像时，原始图像会被替换黑白图像再次出现。我使用的代码是：

var origImgSrc;
$('#gallery img').each(function() {
    origImgSrc = $(this).attr('src');
    var imgExt = /(\.\w{3,4}$)/;
    var newImg = origImgSrc.replace(imgExt, '_h');
    $(this).hover(function() {
      $(this).attr('src', newImg);
     }, function() {
      $(this).attr('src', origImgSrc);
     }); // end hover
}); // end each

我每张图片都有两份（一份黑白，一份彩色）。例如，green.jpg（黑白）、green_h.jpg（彩色）。正则表达式替换了图像的名称，整个代码直接写在 $(document).ready() 方法中。

代码有些工作，当我将鼠标悬停在任何图像上时，它会被相应的彩色图像替换，但是在鼠标移出时，不管图像如何，现在是原始图像被标记中的最后一张图片替换，实际对应的黑白图片不会返回。

我得出了一个可行的解决方案，即我应该定义它 而不是在 each 函数 之外声明 var origImgSrc; 变量在 each 函数中。翻转效果现在可以完美运行，但我想找出这里到底出了什么问题，我遇到这种行为的可能原因是 JS 的 异步流 或 异步性 。完全阅读并理解它，但我仍然无法将这个问题与它联系起来。

任何人都可以解释一下哪里出了问题吗？是否借助 JS 运行时的调用堆栈、WebAPI、回调队列， 等。我理解这些概念，但在非常简单的例子中，在这种情况下无法联系起来。

Answer 1

因为当 hover 回调运行时它使用全局变量 origImgSrc.
变量 origImgSrc 重写每次迭代并最终等于最后一张图像 src。
只需将 origImgSrc 放入您的 each.

为什么 jQuery each() 函数中的全局变量破坏了我的翻转效果？

Why global variable inside jQuery each() function is breaking up my rollover effect?

javascript

each

jquery

asynchronous

this