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。当我有一个list_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需要修复 - 用class替换className。 ClassName是HTML类的JavaScript属性名称。对于HTML jsut，请使用class =＆＃39; foo＆＃39;。

   <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取代并替换它。

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

1 个答案: