如何使用jQuery为多图片容器中的图片添加active类？

你需要在现有jQuery代码中添加点击事件处理逻辑，同时调整鼠标移出的逻辑，确保active类能正确控制图片的持久显示。以下是修改后的完整代码和说明：

修改后的jQuery代码 #

// 获取所有缩略图元素
const cat = $(".thumbnails img")

// 鼠标悬停缩略图：临时显示对应主图（show类）
cat.on('mouseenter', function() {
  const indexcat = cat.index(this)
  $(".images img.show").removeClass("show");
  $(".images img").eq(indexcat).addClass("show");
});

// 鼠标离开缩略图：仅移除临时显示的show类（如果主图有active类，依然保持可见）
cat.on('mouseleave', function() {
  const indexcat = cat.index(this)
  $(".images img").eq(indexcat).removeClass("show");
});

// 点击缩略图：设置对应主图为持久显示（active类）
cat.on('click', function() {
  const indexcat = cat.index(this)
  // 移除所有主图的active类，确保只有当前选中的图片保持可见
  $(".images img.active").removeClass("active");
  // 给对应索引的主图添加active类
  $(".images img").eq(indexcat).addClass("active");
  // 同步更新show类，保持视觉一致性
  $(".images img.show").removeClass("show");
  $(".images img").eq(indexcat).addClass("show");
});

关键改动说明 #

• 修复mouseleave冗余代码：原代码中$(".images img.show").addClass("show");是无效操作，改为直接移除当前主图的show类。由于CSS中active类和show类都设置了opacity:1，所以只要主图有active类，即使移除show类依然会保持可见。
• 添加click事件：点击缩略图时，先清除所有主图的active类，再给当前选中的主图添加active类，确保只有一张图片处于持久显示状态。同时同步更新show类，避免视觉闪烁。

完整代码示例 #

HTML #

<div class="display">
  <div class="images">
    <img class="active" src="https://i.imgur.com/Gnn5LiQ.jpeg" alt="">
    <img src="https://i.imgur.com/stUEge9.jpg" alt="">
    <img src="https://i.imgur.com/rhn41AJ.jpg" alt="">
    <img src="https://i.imgur.com/E8AoMAw.jpg" alt="">
  </div>
  <div class="thumbnails">
    <img src="https://i.imgur.com/Gnn5LiQ.jpeg" alt="" style="width: 100px; height: auto;">
    <img src="https://i.imgur.com/stUEge9.jpg" alt="" style="width: 100px; height: auto;">
    <img src="https://i.imgur.com/rhn41AJ.jpg" alt="" style="width: 100px; height: auto;">
    <img src="https://i.imgur.com/E8AoMAw.jpg" alt="" style="width: 100px; height: auto;">
  </div>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</div>

（注：修正了第一张缩略图的src后缀错误，原jpegg改为jpeg）

CSS #

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.display {
  display: flex;
  width: 740px;
  height: 404px;
  background: silver;
  position: relative;
}
.images img {
  position: absolute;
  opacity: 0;
  transition: all 300ms linear;
}
.images img.show,
.images img.active { 
  opacity: 1;
  transition: .5s linear;
}
.thumbnails {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  padding: 20px;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .5s ease;
}
.thumbnails img {
  margin-left: 5px;
  margin-right: 5px;
  border: 1px solid;
  border-color: transparent;
  transition: opacity .5s ease;
  opacity: .55;
}
.thumbnails img:hover {
  border-color: red;
  opacity: 1;
  cursor: pointer;
}
.display:hover .thumbnails {
  opacity: 1;
}
body {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  background: #000116;
}
img {
  width: 100%;
  height: 100%;
}

内容的提问来源于stack exchange，提问作者3Code