0

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

每个主图像都通过 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-->

我相信我需要为每个产品分别循环遍历我的咖啡脚本代码，但我不确定如何执行它。这是我现在拥有的，以及所有产品的不断变化的图像：

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”数据钩子循环遍历这段代码，但我不确定。

谢谢！

4

0 回答 0