Question

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

每个主图像都通过ruby和html5：

分配给它的product_id

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

我相信我需要为每个产品分别循环我的coffeescript代码，但我不知道如何执行它。这就是我现在所拥有的，以及所有产品的不断变化的图像：

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)

我认为我需要为页面上的每个'productid'数据挂钩循环遍历此代码，但我不确定。

谢谢！

循环遍历coffeescript中的html5数据钩子

0 个答案: