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变量为全局变量，＆＃34;重置＆＃34;它在更新图像功能结束时未定义但没有任何效果。我该如何解决这个问题，并且有更聪明的方法来做到这一点，例如：将所有东西组合在一个功能中？

Answer 1

哇，这很酷，带我一点，但这似乎一贯工作。 Fiddle

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

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

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

1 个答案: