Question

我正在尝试通过jQuery实现翻转效果，当我将鼠标悬停在黑色＆amp;白色图像，它被有色的＆amp;当我移出图像时，原始的B＆amp; W图像再次出现。我正在使用的代码是：

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

我每张图片都有两个副本（一个 B＆amp; W ，一个着色）。例如， green.jpg （B＆amp; W）， green_h.jpg （彩色）。正则表达式替换了image＆amp;的名称。整个代码直接写在$(document).ready()方法中。

代码有点工作，当我将鼠标悬停在任何图像上时，它会被相应的彩色图像替换，但在鼠标输出时，无论图像，原始图像现在被最后一个替换标记中的图像，实际相应的B＆amp; W图像不会回来。

我找到了一个有效的解决方案，即我不应该在var origImgSrc;函数之外声明each变量，而是在里面定义 { {1}}功能。翻滚效果现在完美无缺，但我想找到这里到底出了什么问题。我遇到这种行为的可能原因是JS的异步流或 Asynchronicity 。完全了解它＆amp;理解它，但我仍然无法将这个问题与它联系起来。

任何人都可以以任何方式解释这里出错的内容吗？是否通过 JS运行时的调用堆栈，WebAPI，回调队列，等帮助我了解这些概念，但在非常容易的示例的上下文中，在这种情况下无法联系。

Answer 1

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

为什么jQuery each（）函数中的全局变量会破坏我的翻转效果？

1 个答案: