为什么 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$1');
    $(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 的 异步流 或 Asynchronicity。完全阅读并理解它，但我仍然无法将这个问题与它联系起来。

谁能以任何方式解释这里出了什么问题？是否借助 JS 运行时的调用堆栈、WebAPI、回调队列等 等。我理解这些概念，但在非常简单的示例的上下文中，在这种情况下无法关联。

Answer 1

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