缩略图悬停时的咖啡脚本图像更改答案

【问题标题】：coffeescript image change on thumbnail hover缩略图悬停时的咖啡脚本图像更改
【发布时间】：2013-03-16 07:19:30
【问题描述】：

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

我正在使用带有 ruby 方法的 html 数据元素来为每个产品分配产品 ID：

<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')

感谢您的帮助。

【问题讨论】：

标签： ruby-on-rails html coffeescript

【解决方案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
), ->

图像来源的选择权留给您。在测试之前删除您的代码。

【讨论】：