0

製品ページhttp://pants.telegraphbranding.com/t/women/long-sleeveがあり、メイン画像の下のサムネイルにカーソルを合わせると、メイン画像がサムネイルに切り替わるはずです。しかし、そうではなく、その理由はわかりません。

各製品に製品 ID を割り当てるために、ruby メソッドで html データ要素を使用しています。

<div class="main-image" data-productid="<%= product.id %>">

これが私のコーヒースクリプトです：

add_image_handlers = ->

 thumbnails = ($ '.product-images ul.thumbnails')
 ($ '.main-image').data 'selectedThumb', 'productid', $(this).find('img')
 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) ->
  $(this).find('img').attr 'src', ($ event.currentTarget).find('a').attr('href')

thumbnails.find('li').on 'mouseleave', (event) ->
  $(this).find('img').attr 'src', ($ '.main-image').data('selectedThumb')

ご協力ありがとうございました。

4

1 に答える 1

1

要素にマウスオーバーすると、<li>あなたの src 属性が「productid」に設定されているようです。

うーん...多分もっと簡潔なもので十分でしょうか？

$('.product-images ul.thumbnails li').hover(function() {
  var href = $(this).find('a').attr('href');
  $(this).closest('.product').find('.main-image a img').attr('src', href);
}, function() {});

コーヒーで：

$(".product-images ul.thumbnails li").hover (->
  href = $(this).find("a").attr("href")
  $(this).closest(".product").find(".main-image a img").attr "src", href
), ->

画像ソースの選択はあなたにお任せします。テストの前にコードを削除してください。

于 2013-03-15T23:19:30.317 に答える