我有一个产品页面http://pants.telegraphbranding.com/t/women/long-sleeve,当您将鼠标悬停在主图像下方的缩略图上时,主图像应切换到缩略图。但事实并非如此,我不确定原因。
我正在使用带有ruby方法的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')
感谢您的帮助。
答案 0 :(得分: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
), ->
我给你留下图片来源的选择。在测试之前删除您的代码。