縮略圖懸停時出現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 
), -> 

我留給你的圖像來源的選擇。測試前刪除你的代碼。