Question

我将尝试简化上一个问题：我在http://pants.telegraphbranding.com/t/women/long-sleeve处有一个产品页面。将鼠标悬停在产品的缩略图列表上时，主图像应针对该产品进行更改。但是现在，页面上的每个产品都在尝试改变。要获得我正在使用的产品的唯一ID：

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

如何将data-productid =“＆lt;％= product.id％＆gt;”合并到我的coffeescript文件中？

add_image_handlers = ->

thumbnails = ($ '#product-images ul.thumbnails')
($ '#main-image').data 'selectedThumb', ($ '#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)

显然，我希望coffeescript能够提取每个主图像的唯一ID，以便图像更改只针对特定图像。

我很感激。抱歉这个长度。

Answer 1

首先，应该枚举具有data-productid属性的所有元素。

对于这个页面var elements = $(".main-image")应该足够了。 （请记住这里的类选择器。原始页面包含id选择器，并导致卢布和破坏。现在已修复。）

然后我们应该迭代实现的值：$.each(elements, function(index, element){...})应该做的伎俩。

最后，可以从元素中检索data-productid值（在$.each循环中，我的意思是）：$(element).data("productid")将返回所需的值。 （请注意此处$(element)部分。element.data(...)将无效，因为我们枚举了jQuery访问器，而不是实际元素 - 并且在使用之前需要取消引用它们。）

将其与$.each($(".main-image"), function(index,elem){console.log($(elem).data("productid"))}) 相结合（在Chrome DevTools中针对实际页面进行测试，似乎有效） - 瞧，问题解决了！

将红宝石对象嵌入到coffeescript中

1 个答案: