jQuery更新全局变量，这是一个函数后点击事件在其他函数

Question

我有一个脚本，它改变了几个列表元素的图像，当点击缩略图下面的图像，想想一个色板。该脚本正在交换src和自定义data-hover-src属性(主图像和悬停图像)，HTML onclick属性内的jquery函数变量用PHP填充。

主图像的交换工作正常，但主图像的悬停图像(data-hover-src属性)在单击缩略图后没有得到更新。

这里有一个小提琴来说明这个问题:http://jsfiddle.net/YN3LV/14/

当鼠标悬停在主图像上时，图像交换:

 window.HoverImage = function () {
     var $this = $(this);
     var HoverUrl = $this.data('hover-src');
     $this.data('hover-src', $this.attr('src'));
     $this.attr('src', HoverUrl);
 };
 $(function () {
     $('img.image_update').hover(HoverImage, HoverImage);
 });

点击缩略图时更新主图像

 function UpdateImage(color, defaultimage, hoverimage) {
     var SelectedColor = color;
     var DefaultUrl = defaultimage;
     var HoverUrl = hoverimage;
     $(".swatch_" + SelectedColor).click(function () {
         $(".swatch_" + SelectedColor).closest("ul").prev().attr({
             src: DefaultUrl,
                 "data-hover-src": HoverUrl
         });
     });
 }

我试过通过省略var将HoverUrl变量设置为全局变量，在更新图像函数的末尾"重置"未定义，但没有任何效果。我该如何解决这个问题，是否有更聪明的方法来做到这一点，例如通过将所有内容组合在一个函数中?

Answer 1

哇，这是相当酷，花了我一点，但这似乎一直工作。小提琴

基本上，数据选择器似乎不适合我们的情况。所以我用attr代替。也许把它们混在一起才是真正的问题。

 HoverUrl = $this.attr('data-hover-src');
 DefaultUrl = $this.attr('src');
 $this.attr('data-hover-src',DefaultUrl );
 $this.attr('src', HoverUrl);