鼠标/悬停在图像上更改父图像 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 源更改为 product_image 源。当我有一个列表项 product_thumbnail 的 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);
    });

工作示例：JSFiddle

很遗憾，我没有一个带有 ID 的列表项。当然，当我用类和上面的 html 尝试这段代码时，它总是会给我第一个列表的第一个 product_thumbnail div 中第一个图像的 src项目。

我希望你们理解我的问题，并且有人可以帮助我解决 jQuery 示例代码的类版本。

提前致谢

Answer 1

首先 html 需要修复 - 将 className 替换为 class。 ClassName 是 HTML class 的 JavaScript 属性名称。对于 HTML 只需使用 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"));
    });

魔法就在选择器中。 closest 从起始元素开始查找 DOM 。我们寻找最接近 class=product 的元素。当我们找到它时，我们用 class=product_thumbnail 寻找它的子图像，然后是它的子图像。这一切都假设只有一次出现，如果有多次点击，此代码将有所不同。

找到目标后，我们首先将其原始 src 值存储在其数据集合中，然后将 src 值替换为触发 img src。

在鼠标移出时，我们取出存储在缩略图数据中的 src 并替换它。

鼠标/悬停在图像上更改父图像 src

Mouse / Hover over image change parent image src

javascript

jquery

hover

mouseover