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")必要な値を返します。(ここの部分に注意してください。実際の要素ではなく jQuery アクセサーを列挙したため、機能しません。使用前に逆参照する必要があります。)$(element)element.data(...)

$.each($(".main-image"), function(index,elem){console.log($(elem).data("productid"))}) それを（実際のページに対してChrome DevToolsでテストされ、動作するように見えた）のようなものに組み合わせると、ほら、問題は解決しました！

于 2013-03-14T21:49:44.427 に答える