鼠标/鼠标悬停图像变化父图片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存储在缩略图数据中并将其替换。