0

我将尝试简化上一个问题：我在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="<%= product.id %> 合并到我的咖啡脚本文件中？

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，以便仅针对该特定图像发生图像更改。

我很感激。对不起，长度。

4

1 回答 1

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 中针对实际页面进行测试，似乎有效） ——瞧，问题解决了！

于 2013-03-14T21:49:44.427 回答