js多类同一函数

mzsu5hc0 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(219)

我使用js加载大图像，当鼠标悬停以列出缩略图ok时。但不要工作到多重。
如何：悬停 .thumbs .item 属于 boximg_01 或 boximg_02 .... 仅在中加载图像 boximg_1 或 boximg_02 宽度1 js函数。倍数 boximg_* 仅加载元件的img。
现在什么时候悬停 thumbs img 属于 boximg_01 它在两个方向上运行两个大img boximg_01 & boximg_02 ```
$(document).ready(function() {
$(".box-image .thumbs img").hover(function() {
var imgpath = $(this).attr("dir");
$(".box-image .image").html("");
});
});

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;}

jquery JavaScript Function

来源：https://stackoverflow.com/questions/68517824/js-multiple-class-same-function

1条答案

按热度按时间

z9ju0rcb1#

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

$(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>

赞(0）回复(0）举报 2021-09-13

我来回答

js多类同一函数

image {

thumbs, .thumbs {

1条答案

相关问题

热门标签

最新问答