썸네일 마우스 오버시 coffeescript 이미지 변경

Question

제품 페이지가 http://pants.telegraphbranding.com/t/women/long-sleeve이고 메인 이미지 아래의 썸네일 위로 마우스를 가져 가면 메인 이미지가 썸네일로 전환됩니다. 하지만 그렇지 않아 왜 그런지 모르겠습니다.

나는 각 제품에 제품 ID의를 할당 루비 방법과 HTML 데이터 요소를 사용하고 있습니다 :

는

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

여기 내 커피 스크립트입니다 :

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> 요소를 마우스 오버 할 때 your 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 
), -> 

내가 당신에게 이미지 소스의 선택을 둡니다. 테스트 전에 코드를 제거하십시오.