jQuery актуализира глобална променлива, която е функция след събитие за щракване в друга функция

Имам скрипт, който променя изображенията на няколко елемента от списъка, когато щраквам върху миниатюри под изображенията, помислете за цветна мостра. Скриптът разменя src и персонализиран атрибут data-hover-src (основно изображение и изображение при задържане), променливите на функцията jquery в атрибута HTML onclick се попълват с 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
         });
     });
 }

Опитах се да настроя променливата HoverUrl като глобална, като пропуснах променливата, „нулирах“ я с undefined в края на функцията за актуализиране на изображението, но нищо не работи. Как мога да разреша това и има ли по-интелигентен начин да направя това, напр. чрез комбиниране на всичко в една функция?


jquery global-variables callback
person Socrates    schedule 02.05.2014    source източник

Отговори (1)


arrow_upward
1
arrow_downward

Уау, това е доста готино, отне ми малко време, но изглежда, че работи постоянно. Fiddle

По принцип селекторът на данни изглежда не работи за нашата ситуация. Така че вместо това използвах attr. Може би смесването им е истинският проблем.

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