如何使用jQuery实现选中图片在侧边同步展示的功能？

修改说明 #

在现有代码基础上新增右侧预览区域、同步更新选中图片地址即可实现需求，完整可运行代码如下：

HTML代码

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<!-- 新增外层布局容器实现左右排列 -->
<div style="display: flex; gap: 40px; align-items: flex-start;">
  <div id="wrapper">
    <div id="region1" class="image-container">
      <img src="https://cdn.mos.cms.futurecdn.net/DEpYy8jSdvD9dkvVDSPNoD.jpg" alt="">
    </div>
    <div id="region2" class="image-container">
      <img src="https://www.starwarsnewsnet.com/wp-content/uploads/2014/05/star-20wars-20video-20games-20hoth-20atat-20empire-20at-20war-201680x1050-20wallpaper_wallpaperswa.com_551.jpg" alt="">
    </div>
    <div id="region3" class="image-container">
      <img src="https://www.austinchronicle.com/binary/e3fd/AllisonLefcort_CaptainPhasma_Add.jpg" alt="">
    </div>
    <div id="region4" class="image-container">
      <img src="https://cdn.mos.cms.futurecdn.net/ew7hxbJKwPewaRmjYW79bi.jpg" alt="">
    </div>
    <div id="region5" class="image-container">
      <img src="https://www.starwarsnewsnet.com/wp-content/uploads/2021/01/Empire-at-War_wall.jpg" alt="">
    </div>
  </div>

  <!-- 新增右侧预览区域 -->
  <div id="preview-area">
    <p>已选图片预览</p>
    <img id="preview-img" alt="选中的区域图片">
  </div>
</div>

<select class="form-control" id="sel1">
  <option value="region1">1 - 乌迪内市中心</option>
  <option value="region2">2 - 里齐 / 圣多米尼克 / 科尔莫 / 圣罗科</option>
  <option value="region3">3 - 莱帕科 / 圣哥达</option>
  <option value="region4">4 - 乌迪内南部</option>
  <option value="region5">5 - 库西尼亚科</option>
</select>

CSS代码

#wrapper .image-container {
  position: relative;
  width: 100px;
  height: 100px;
  display: inline-block;
  cursor: pointer;
}

#wrapper img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.image-container.selected::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4)
}

/* 预览区域样式 */
#preview-img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border: 1px solid #e5e7eb;
}

JS代码

const containers = $('.image-container')
const select = $('#sel1')
const previewImg = $('#preview-img') // 获取预览图元素

// 初始化默认选中第一个区域
selectElement('region1')

containers.on('click', function() {
  const id = $(this).attr('id')
  selectElement(id)
  select.val(id)
})

select.change(function() {
  selectElement($(this).val())
})

function selectElement(id) {
  // 原有选中状态切换逻辑
  containers.removeClass("selected")
  $('#' + id).addClass("selected")
  // 按需求更新预览图地址为指定格式
  previewImg.attr('src', `https://www.example.com/${id}.png`)
  // 若需要展示实际点击的原图，可替换为以下代码：
  // previewImg.attr('src', $(`#${id} img`).attr('src'))
}

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