Question

在小提琴中你可以看到我的问题。我如何在特定类中重写动作。当缩小缩略图时，只应显示父div中的图像。在我的情况下，另一个div中的图像也会出现。

Stackoverflow中的JSFiddle Snippet似乎存在问题。所以这里是jsfiddle的链接：https://jsfiddle.net/te6x9ohv/11/

$('.ImageAttributeList').mouseenter(function () {
  $('div.previewImages')
  .hide()
  .after('<div class="thumbnailPreview">' +
         '<img src="' + $(this).attr('src') + '">' +
         '</div>');
});

$('.ImageAttributeList').mouseleave(function () {
  $('div.previewImages').show();
  $('div.thumbnailPreview').remove();
});

.item { float: left; padding: 0 20px; width: 300px }
.itemMain { height: 302px; }
.previewImages, .thumbnailPreview  { display: table; margin: 0 auto; }
.previewImages img, .thumbnailPreview img { border: 1px solid #DDD; width: 300px; }
.imgatt { display: table; margin: 0 auto; }
.imgatt img { max-width: 50px; }
.ImageAttributeList { margin: 4px; padding: 0px; border: 1px solid #DDD }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td>
<center>
<h3>item-ID1</h3>
</center>
<div class="item item-ID1">
<div class="itemMain">
<div class="previewImages">
    <img src="https://magento.fashionette.de/media/catalog/product/cache/1/image/725x725/9df78eab33525d08d6e5fb8d27136e95/u/g/ugg-92665-02.jpg">
<div class="thumbnailPreview">
</div>
</div>

<div class="imgatt">
    <img class="ImageAttributeList" src="https://picture1.cyberport.de/mall/shopde/pic/zbild3/zbild3-859346A409-1K3_1500.JPG">
    <img class="ImageAttributeList" src="https://picture1.cyberport.de/mall/shopde/pic/zbild5/zbild5-859346A409-1K3_1500.JPG">
</div>
</div>
</div>
</td>
<td>
<center><h3>item-ID2</h3></center>
<div class="item item-ID2">
<div class="itemMain">
<div class="previewImages">
    <img src="https://magento.fashionette.de/media/catalog/product/cache/1/image/725x725/9df78eab33525d08d6e5fb8d27136e95/u/g/ugg-92551-02.jpg">
<div class="thumbnailPreview">
</div>
</div>

<div class="imgatt">
    <img class="ImageAttributeList" src="https://picture1.cyberport.de/mall/shopde/pic/zbild3/zbild3-859346A409-1K3_1500.JPG">
    <img class="ImageAttributeList" src="https://picture1.cyberport.de/mall/shopde/pic/zbild5/zbild5-859346A409-1K3_1500.JPG">
</div>
</div>
</div>
</td>
</tr>
</table>

Answer 1

您可以使用JQuery :eq psuedo选择器来选择某个选择器的出现次数。见下文：

$('.ImageAttributeList:eq(2)').mouseenter(function () {
  $('div.previewImages:eq(0)')
  .hide()
  .after('<div class="thumbnailPreview">' +
         '<img src="' + $(this).attr('src') + '">' +
         '</div>');
});

$('.ImageAttributeList:eq(3)').mouseenter(function () {
  $('div.previewImages:eq(1)')
  .hide()
  .after('<div class="thumbnailPreview">' +
         '<img src="' + $(this).attr('src') + '">' +
         '</div>');
});

Here is a demo

Answer 2

您可以用

替换您的活动

$('.ImageAttributeList').mouseenter(function () {
  $(this).closest(".itemMain").find(".previewImages")
  .hide()
  .after('<div class="thumbnailPreview">' +
         '<img src="' + $(this).attr('src') + '">' +
         '</div>');
});

仅在具有ID的特定DIV内限制操作

2 个答案: