JS多个类相同的功能答案

【问题标题】：JS multiple class same functionJS多个类相同的功能
【发布时间】：2021-07-25 10:49:40
【问题描述】：

我使用 js 加载大图像时，将鼠标悬停以列出缩略图 ok。但不要对多个工作。

如何：悬停 .thumbs .item 或 boximg_01 或 boximg_02 .... 仅在 boximg_1 或 boximg_02 中加载图像宽度一个 js 函数。多个boximg_*只加载元素的img。

现在，当悬停在 boximg_01 的 thumbs img 时，它会在 boximg_01 和 boximg_02 上运行 2 个大图像

$(document).ready(function() {
  $(".box-image .thumbs img").hover(function() {
    var imgpath = $(this).attr("dir");
    $(".box-image .image").html("<img src=" + imgpath + ">");
  });
});

#image {
  max-width: 348px;
  margin: 0 auto;
  float: left;
  background: red;
}
#thumbs, .thumbs {
  width: 100%;
  margin: 0 auto;
  display: flex;
  float: left;
}
.thumbs .item {width: 100px; height: 100px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_01 box-image">
  <div id="image" class="image">
      <a data-fancybox="gallery" href="#">
        <img src="https://picsum.photos/id/1/400/400">
      </a>
    </div>
  <div class="thumbs">
      <div class="item active"><img dir="https://picsum.photos/id/1/400/400" src="https://picsum.photos/id/1/100/100"></div>
      <div class="item"><img dir="https://picsum.photos/id/2/400/400" src="https://picsum.photos/id/2/100/100"></div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_02 box-image">
  <div id="image" class="image">
      <a data-fancybox="gallery" href="#">
        <img src="https://picsum.photos/id/3/400/400">
      </a>
    </div>
  <div class="thumbs">
      <div class="item active"><img dir="https://picsum.photos/id/3/400/400" src="https://picsum.photos/id/3/100/100"></div>
      <div class="item"><img dir="https://picsum.photos/id/4/400/400" src="https://picsum.photos/id/4/100/100"></div>
    </div>
</div>

【问题讨论】：

使用$(this)和DOM导航方法来引用同一个DIV中的元素。
@Barmar 你能帮我一个例子运行代码sn-p。 JS不是我的强项...

标签： javascript jquery function

【解决方案1】：

使用相对于this 的 DOM 导航来查找相关图像。

$(document).ready(function() {
  $(".box-image .thumbs img").hover(function() {
    var imgpath = $(this).attr("dir");
    $(this).closest(".box-image").find(".image").html("<img src=" + imgpath + ">");
  });
});

#image {
  max-width: 348px;
  margin: 0 auto;
  float: left;
  background: red;
}
#thumbs, .thumbs {
  width: 100%;
  margin: 0 auto;
  display: flex;
  float: left;
}
.thumbs .item {width: 100px; height: 100px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_01 box-image">
  <div id="image" class="image">
      <a data-fancybox="gallery" href="#">
        <img src="https://picsum.photos/id/1/400/400">
      </a>
    </div>
  <div class="thumbs">
      <div class="item active"><img dir="https://picsum.photos/id/1/400/400" src="https://picsum.photos/id/1/100/100"></div>
      <div class="item"><img dir="https://picsum.photos/id/2/400/400" src="https://picsum.photos/id/2/100/100"></div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_02 box-image">
  <div id="image" class="image">
      <a data-fancybox="gallery" href="#">
        <img src="https://picsum.photos/id/3/400/400">
      </a>
    </div>
  <div class="thumbs">
      <div class="item active"><img dir="https://picsum.photos/id/3/400/400" src="https://picsum.photos/id/3/100/100"></div>
      <div class="item"><img dir="https://picsum.photos/id/4/400/400" src="https://picsum.photos/id/4/100/100"></div>
    </div>
</div>

【讨论】：

顺便说一句，如果文件路径是动态的，最好使用 .empty().append($("<img>", {src: imgpath})) 而不是 .html 以防止 XSS。
我真的会使用.find(".image img").attr("src", imgpath")
哦，对了，img 元素已经存在 - 而且这不会破坏 fancybox gallery 包装器。