如何修改代码实现点击缩略图打开对应Modal并仅显示其内部轮播图？

当前点击缩略图打开带图片滑块的Modal后，可滑动浏览所有Modal中的全部图片，需求修改为：每个项目的缩略图对应打开专属Modal，且仅能滑动该Modal内部的轮播图片。

1. 修改HTML结构 #

给每个触发Modal的openmodal元素添加data-modal-id属性，明确关联对应的Modal ID；同时移除滑块按钮上的全局onclick事件，改为通过事件委托绑定：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<!-- Modal 1 -->
<div id="modal1" class="modal">
  <a class="closemodal">X</a>
  <div class="modal-content">
    <div class="slideshow-container">
      <img class="manual-carousel" src="images/image1.jpg">
      <img class="manual-carousel" src="images/image2.jpg">
      <img class="manual-carousel" src="images/image3.jpg">
      <button class="prev">‹</button>
      <button class="next">›</button>
    </div>
  </div>
</div>

<!-- Modal 2 -->
<div id="modal2" class="modal">
  <a class="closemodal">X</a>
  <div class="modal-content">
    <div class="slideshow-container">
      <img class="manual-carousel" src="images/image4.jpg">
      <img class="manual-carousel" src="images/image5.jpg">
      <img class="manual-carousel" src="images/image6.jpg">
      <button class="prev">‹</button>
      <button class="next">›</button>
    </div>
  </div>
</div>

<!-- Modal 3 -->
<div id="modal3" class="modal">
  <a class="closemodal">X</a>
  <div class="modal-content">
    <div class="slideshow-container">
      <img class="manual-carousel" src="images/image7.jpg">
      <img class="manual-carousel" src="images/image8.jpg">
      <img class="manual-carousel" src="images/image9.jpg">
      <button class="prev">‹</button>
      <button class="next">›</button>
    </div>
  </div>
</div>

<!-- 缩略图触发元素 -->
<li>
  <a class="openmodal" data-modal-id="modal1">
    <img class="thumbnail" src="images/thumbnail1.jpg">
    <p>Title</p>
  </a>
</li>
<li>
  <a class="openmodal" data-modal-id="modal2">
    <img class="thumbnail" src="images/thumbnail2.jpg">
    <p>Title</p>
  </a>
</li>
<li>
  <a class="openmodal" data-modal-id="modal3">
    <img class="thumbnail" src="images/thumbnail3.jpg">
    <p>Title</p>
  </a>
</li>

2. 重写JavaScript逻辑 #

移除全局的滑块索引，改为给每个Modal单独维护滑块状态；通过事件委托处理滑块按钮点击，确保只操作当前打开的Modal内的图片：

// Modal 控制逻辑
$('.openmodal').click(function() {
  const modalId = $(this).data('modal-id');
  // 打开对应Modal并初始化其滑块
  $(`#${modalId}`).addClass('visible').each(function() {
    const $modal = $(this);
    // 初始化滑块索引，存到Modal元素上
    if (!$modal.data('sliderIndex')) {
      $modal.data('sliderIndex', 1);
      showSliders($modal, 1);
    }
  });
});

$(".closemodal").click(function() {
  $(this).closest(".modal").removeClass("visible");
});

$(document).click(function(event) {
  if (!$(event.target).closest(".modal,.openmodal").length) {
    $(".modal").removeClass("visible");
  }
});

// 滑块控制逻辑
function plusSlider($modal, n) {
  let currentIndex = $modal.data('sliderIndex') || 1;
  currentIndex += n;
  showSliders($modal, currentIndex);
}

function showSliders($modal, n) {
  const $slides = $modal.find(".manual-carousel");
  let sliderIndex = n;
  
  // 处理索引边界
  if (sliderIndex > $slides.length) {
    sliderIndex = 1;
  }
  if (sliderIndex < 1) {
    sliderIndex = $slides.length;
  }
  
  // 隐藏所有图片，显示当前索引的图片
  $slides.hide();
  $slides.eq(sliderIndex - 1).show();
  
  // 更新Modal上存储的索引
  $modal.data('sliderIndex', sliderIndex);
}

// 事件委托绑定滑块按钮点击
$(document).on('click', '.modal .prev, .modal .next', function() {
  const $modal = $(this).closest(".modal");
  const direction = $(this).hasClass('prev') ? -1 : 1;
  plusSlider($modal, direction);
});

关键修改点 #

• 使用data-modal-id替代索引关联，避免DOM顺序变化导致的匹配错误
• 每个Modal单独存储滑块索引，不再使用全局变量，确保滑块独立
• 通过事件委托处理滑块按钮，只操作当前打开的Modal内的图片
• 关闭Modal时仅操作当前点击的Modal，不影响其他Modal状态

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