jQuery多滑块故障：each()与this实现双滑块独立运行问题排查

嘿，你遇到的这个多滑块冲突问题，核心原因是多个滑块共用了同一个状态变量和定时器，导致第二个滑块的运行逻辑被第一个“抢”走了。咱们把每个滑块的状态单独封装起来，就能让它们各自独立跑啦～

问题根源分析 #

你之前尝试用each()的思路是完全正确的，但可能没把每个滑块的currentSlide、定时器这些关键变量绑定到各自的滑块实例上——如果用了全局或共享变量，第二个滑块跑一次后，就会被第一个滑块的循环逻辑覆盖，自然就停住了。

修复后的代码实现 #

$(document).ready(function() {
  // 遍历每个滑块容器，为每个容器创建独立的运行上下文
  $('.fhslide').each(function() {
    const $slider = $(this);
    const $slides = $slider.find('.slide');
    let currentSlide = 0;
    let slideInterval;

    // 从slide的dur-*类中解析自定义时长
    function getSlideDuration($targetSlide) {
      const durationClass = $targetSlide.attr('class').split(' ').find(cls => cls.startsWith('dur-'));
      if (durationClass) {
        return parseInt(durationClass.split('-')[1]) * 1000; // 转换为毫秒
      }
      return 5000; // 默认5秒时长
    }

    // 单个滑块的切换逻辑
    function nextSlide() {
      // 隐藏当前幻灯片
      $slides.eq(currentSlide).fadeOut(500);
      // 更新当前索引，循环回到开头
      currentSlide = (currentSlide + 1) % $slides.length;
      // 显示下一张幻灯片
      $slides.eq(currentSlide).fadeIn(500);
      // 清除当前滑块的旧定时器，用新幻灯片的时长重新设置
      clearInterval(slideInterval);
      slideInterval = setInterval(nextSlide, getSlideDuration($slides.eq(currentSlide)));
    }

    // 初始化当前滑块：隐藏所有幻灯片，显示第一张并启动定时器
    $slides.hide();
    $slides.eq(0).show();
    slideInterval = setInterval(nextSlide, getSlideDuration($slides.eq(0)));
  });
});

关键改动说明 #

• 把$slider、$slides、currentSlide、slideInterval都放在each()的回调函数内部，让每个滑块拥有完全独立的状态变量，彻底避免互相干扰。
• 用$(this)指代当前遍历到的滑块容器，所有操作都限定在这个容器内部的幻灯片上，不会误操作其他滑块。
• 每次切换幻灯片时，都会清除当前滑块的旧定时器，再用当前幻灯片的自定义时长重新设置，保证每张幻灯片的时长规则都能生效。

这样修改后，每个带fhslide类的滑块都会独立循环运行，再也不会出现第二个滑块只跑一次就停的问题啦～

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