将 ruby​​ 对象嵌入到咖啡脚本中

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=" 合并到我的咖啡脚本文件中？

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) 

显然，我希望咖啡脚本提取每个主图像的唯一 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 中针对实际页面进行测试，似乎有效） — 瞧，问题解决了！