鼠標/鼠標懸停圖像變化父圖片src

Question

我有以下問題，可以說這是我的HTML

<ul classname='products'> 
    <li classname='product'> 
     <div classname='product_title'>Product 1</div> 
     <div classname='product_thumbnail'><img src="product1.jpg"></div> 
     <div classname='product_images'> 
     <img src="product1_image1.jpg"> 
     <img src="product1_image2.jpg"> 
     </div> 
    </li> 
    <li classname='product'> 
     <div classname='product_title'>Product 2</div> 
     <div classname='product_thumbnail'><img src="product2.jpg"></div> 
     <div classname='product_images'> 
     <img src="product2_image1.jpg"> 
     <img src="product2_image2.jpg"> 
     </div> 
    </li> 
    <li classname='product'> 
     <div classname='product_title'>Product 3</div> 
     <div classname='product_thumbnail'><img src="product2.jpg"></div> 
     <div classname='product_images'> 
     <img src="product3_image1.jpg"> 
     <img src="product3_image2.jpg"> 
     </div> 
    </li> 
</ul> 

當我將鼠標懸停在product_image我想給product_thumbnail SRC切換到product_image SRC。它不是很辛苦時，我不得不與具有ID

然後，我可以這樣做

var $mainImage = $('#product_thumbnail'), 
    originalImageSrc = $mainImage.attr('src'); 

$('.product_images img') 
    .on('mouseover', function() { 
     var newImageSrc = $(this).attr('src'); 
     $mainImage.attr('src', newImageSrc); 
    }) 
    .on('mouseout', function() { 
     $mainImage.attr('src', originalImageSrc); 
    }); 

工作示例product_thumbnail一個列表項：JSFiddle

可悲的是我沒有一個列表項與一個ID。 當然，當我嘗試使用上面的類和上面的html代碼時，它會始終將第一個列表項的第一個product_thumbnail div中的第一個圖像的src返回給我。

我希望你們瞭解我的問題，並且有人可以幫助我使用jQuery示例代碼的類版本。

在此先感謝

Answer 1

首先html需要修復 - 用class替換className。 ClassName是HTML類的JavaScript屬性名稱。對於HTML jsut使用class ='foo'。

<ul class='products'> 
     <li class='product'> 
     <div class='product_title'>Product 1</div> 
     <div class='product_thumbnail'><img src="product1.jpg"/></div> 
     <div class='product_images'> 
      <img src="product1_image1.jpg"> 
      <img src="product1_image2.jpg"> 
     </div> 
     </li> 
     <li class='product'> 
     <div class='product_title'>Product 2</div> 
     <div class='product_thumbnail'><img src="product2.jpg"/></div> 
     <div class='product_images'> 
      <img src="product2_image1.jpg"> 
      <img src="product2_image2.jpg"> 
      <img src="product2_image3.jpg"> 
     </div> 
     </li> 
    </ul> 

而且JS現在看起來是這樣的：

$('.product_images img') 
    .on('mouseover', function() { 
     var tgt = $(this).closest(".product").find(".product_thumbnail img") 
     tgt.data("orig_src", tgt.prop("src")) 
     tgt.prop("src", $(this).prop("src")); 
    }) 
    .on('mouseout', function() { 
     var tgt = $(this).closest(".product").find(".product_thumbnail img") 
     tgt.prop("src", tgt.data("orig_src")); 
    }); 

神奇的是在選擇。最接近從起始元素查找DOM。我們尋找class = product的最接近的元素。當我們找到它時，我們會查找其class = product_thumbnail的孩子，然後查找其子圖像。這一切都假定只有一次發生，如果有多次命中，這段代碼會有所不同。

找到目標後，我們首先將其原始src值存儲在其數據集合中，然後我們用觸發img src替換src值。

在鼠標移出時，我們將src存儲在縮略圖數據中並將其替換。