Javascript 在coffeescript中循环使用html5数据挂钩

我有一个产品列表页面，主要产品图片和每个主要图片下方的变体缩略图。将鼠标悬停在缩略图上时，应将主图像更改为缩略图的主图像。我几乎让它工作了，除了当你将鼠标悬停在缩略图上时，它会改变页面上每个产品的主图像，而不仅仅是缩略图下面的产品

通过ruby和html5为每个主图像分配其产品标识：

<div class="main-image" data-productid="<%= product.id %>">
  <%= link_to large_image(product, :itemprop => "image", :class => "product-image"), product, :itemprop => 'url' %>
</div><!-- main-image-->

我想我需要为页面上的每个“productid”数据钩子循环这段代码，但我不确定

---

谢谢大家!

您的“mouseenter”表达式中有一个jQuery错误（$'.main image img'）`将更改所有图像，而不仅仅是与事件关联的图像<代码>（$event.currentTarget）.最近的（'.main image'）.find（'img'）.attr'src'，…更接近您想要的。感谢您的评论。您知道我将如何将productid数据元素包含在其中吗？另外，这里有一个我编写的coffeescript片段，它迭代了所有的数据元素，从每个图像中提取productid，

$.each$（.main image”），（index，elem）->console.log$（elem）.data（“productid”）

，但我不知道如何将它嵌入到上面的文件中，以便它在每个productid上执行所有代码。非常感谢。对于每个产品，我都会创建一个DIV，其中包含我关心的各种质量的数据字符串：

等等，然后，不管发生什么事件，我都会搜索最接近的（'.product'），并取出我关心的所有数据。或者，我会使用一个面向数据的MVVM框架，比如主干或Angular，让它为我完成所有的工作。

add_image_handlers = ->

  thumbnails = ($ '.product-images ul.thumbnails')
  ($ '.main-image').data 'selectedThumb', 'productid', ($ '.main-image img').attr('src')
  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) ->
    ($ '.main-image img').attr 'src', ($ event.currentTarget).find('a').attr('href')

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

show_variant_images = (variant_id) ->
  ($ 'li.vtmb').hide()
  ($ 'li.vtmb-' + variant_id).show()
  currentThumb = ($ '#' + ($ '.main-image').data('selectedThumbId'))
  if not currentThumb.hasClass('vtmb-' + variant_id)
    thumb = ($ ($ 'ul.thumbnails li:visible.vtmb').eq(0))
    thumb = ($ ($ 'ul.thumbnails li:visible').eq(0)) unless thumb.length > 0
    newImg = thumb.find('a').attr('href')
    ($ 'ul.thumbnails li').removeClass 'selected'
    thumb.addClass 'selected'
    ($ '.main-image img').attr 'src', newImg
    ($ '.main-image').data 'selectedThumb', newImg
    ($ '.main-image').data 'selectedThumbId', thumb.attr('id')

update_variant_price = (variant) ->
  variant_price = variant.data('price')
  ($ '.price.selling').text(variant_price) if variant_price

$ ->
  add_image_handlers()
  show_variant_images ($ '#product-variants input[type="radio"]').eq(0).attr('value') if          ($ '#product-variants input[type="radio"]').length > 0
($ '#product-variants input[type="radio"]').click (event) ->
show_variant_images @value
update_variant_price ($ this)