如何让多个jQuery导航滑块独立工作（无需修改类结构）

嘿，我明白你的困扰了！问题出在你的代码没有把导航操作限定在当前点击的帖子容器内——原来的写法会让所有.post下的幻灯片都被同一个导航控制，这就是为什么第二个按钮会影响第一个帖子的幻灯片。

不用改现有类结构，我们只需要给操作加上“范围限定”就行，具体步骤如下：

1. 修改点击事件，锁定当前帖子容器 #

点击导航按钮时，先通过closest()找到这个按钮所属的父级.post容器，把它作为参数传给showSlide函数，这样后续操作就只会针对这个容器里的幻灯片：

$(function() {
  $('.post a').on('click', function(e) {
    e.preventDefault();
    // 获取当前点击导航所在的帖子容器
    const $currentPost = $(this).closest('.post');
    // 把容器和当前点击的索引一起传给showSlide
    showSlide($currentPost, $(this).index());
  });

2. 初始化每个帖子的默认幻灯片 #

原来的showSlide(0)只会初始化第一个帖子的幻灯片，现在要遍历所有.post，给每个都初始化第一个可见幻灯片：

// 遍历每个帖子，初始化各自的第一个幻灯片
  $('.post').each(function() {
    showSlide($(this), 0);
  });

3. 更新showSlide函数，限定操作范围 #

修改showSlide函数，让它只在传入的帖子容器内查找和操作幻灯片，而不是全局查找：

function showSlide($postContainer, index) {
    // 只在当前帖子容器内移除所有可见类
    $postContainer.find('.post__slide').removeClass('post__slide--visible');
    // 只在当前帖子容器内给对应索引的幻灯片添加可见类
    $postContainer.find('.post__slide').eq(index).addClass('post__slide--visible');
  }
});

为什么这样能解决问题？ #

原来的$('.post .post__slide')会选中页面上所有帖子里的幻灯片元素，所以点击第二个帖子的导航时，会同时修改所有帖子的幻灯片状态。现在通过closest('.post')锁定当前操作的帖子容器，再用find()在这个容器内查找元素，就实现了每个导航只控制自己帖子里的幻灯片，完全独立工作，而且没有改动任何现有类结构。

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