缩略图悬停时出现coffeescript图像变化

Question

我有一个产品页面，http://pants.telegraphbranding.com/t/women/long-sleeve，当您将鼠标悬停在主图像下方的缩略图上时，主图像应切换到缩略图。但它不是，我不知道为什么。

我使用的HTML数据元素与红宝石的方法对产品的ID分配给每个产品：

<div class="main-image" data-productid="<%= product.id %>"> 

这里是我的CoffeeScript：

add_image_handlers = -> 

thumbnails = ($ '.product-images ul.thumbnails') 
($ '.main-image').data 'selectedThumb', 'productid', $(this).find('img') 
thumbnails.find('li').eq(0).addClass 'selected' 
thumbnails.find('a').on 'click', (event) -> 
    ($ '.main-image').data 'selectedThumb', ($ event.currentTarget).attr('href') 
    ($ '.main-image').data 'selectedThumbId', ($ event.currentTarget).parent().attr('id') 
    ($ this).mouseout -> 
    thumbnails.find('li').removeClass 'selected' 
    ($ event.currentTarget).parent('li').addClass 'selected' 
    false 
thumbnails.find('li').on 'mouseenter', (event) -> 
    $(this).find('img').attr 'src', ($ event.currentTarget).find('a').attr('href') 

thumbnails.find('li').on 'mouseleave', (event) -> 
    $(this).find('img').attr 'src', ($ '.main-image').data('selectedThumb') 

谢谢您的帮助。

Answer 1

看起来，当您将鼠标悬停在<li>元素上时，您的src属性设置为“productid”。

那么...也许更简洁的东西就足够了？

$('.product-images ul.thumbnails li').hover(function() { 
    var href = $(this).find('a').attr('href'); 
    $(this).closest('.product').find('.main-image a img').attr('src', href); 
}, function() {}); 

在咖啡：

$(".product-images ul.thumbnails li").hover (-> 
    href = $(this).find("a").attr("href") 
    $(this).closest(".product").find(".main-image a img").attr "src", href 
), -> 

我留给你的图像来源的选择。测试前删除你的代码。