如何通过点击在不相关div间切换？jQuery滑动切换问题咨询

嘿，我来帮你搞定这个点击切换幻灯片的问题～ 你不确定要不要用data属性、不知道怎么实现，我分两种最常见的场景给你讲，顺便说说你现有代码的小问题：

一、对应按钮切换对应幻灯片（推荐用data属性，清晰又好维护） #

如果是有多个按钮，每个按钮对应一张幻灯片，用data属性关联按钮和幻灯片绝对是最优解——不用依赖DOM结构的位置，后期加新内容也超方便。

先补一个合理的HTML结构（你可以根据自己的需求调整） #

<div class="btn-wrap">
  <button class="btn slide-btn" data-slide-target="#slide1">幻灯片1</button>
  <button class="btn slide-btn" data-slide-target="#slide2">幻灯片2</button>
  <button class="btn slide-btn" data-slide-target="#slide3">幻灯片3</button>
</div>
<div class="slides">
  <!-- 第一张默认显示，加个inline样式或者给个active类都行 -->
  <div class="slide" id="slide1" style="display:block;">我是幻灯片1内容</div>
  <div class="slide" id="slide2">我是幻灯片2内容</div>
  <div class="slide" id="slide3">我是幻灯片3内容</div>
</div>

对应的JS代码 #

// 给所有切换按钮绑定点击事件
$('.slide-btn').on('click', function() {
  // 先收起所有幻灯片，避免多个同时显示
  $('.slide').stop().slideUp('fast');
  // 通过data属性获取当前按钮要切换到的幻灯片
  const targetSlide = $(this).data('slide-target');
  // 展开目标幻灯片
  $(targetSlide).stop().slideDown('fast');
});

这里的data-slide-target就是用来关联按钮和对应幻灯片的，你只要保证按钮的data属性值和幻灯片的ID一致就行，就算按钮和幻灯片不在同一个父容器里，也能正常工作，比你之前用next()依赖DOM位置靠谱多了。

二、前后切换按钮（上一张/下一页） #

如果是想做“上一页/下一页”这种切换逻辑，不用data属性也能实现，核心是找到当前显示的幻灯片，然后切换到相邻的兄弟元素：

HTML结构示例 #

<div class="btn-wrap">
  <button class="btn prev-btn">上一张</button>
  <button class="btn next-btn">下一张</button>
</div>
<div class="slides">
  <div class="slide" style="display:block;">幻灯片1</div>
  <div class="slide">幻灯片2</div>
  <div class="slide">幻灯片3</div>
</div>

对应的JS代码 #

// 下一张按钮逻辑
$('.next-btn').on('click', function() {
  // 找到当前显示的幻灯片
  const currentSlide = $('.slides .slide:visible');
  // 获取下一张幻灯片
  let nextSlide = currentSlide.next('.slide');
  // 如果当前是最后一张，切换回第一张
  if (!nextSlide.length) {
    nextSlide = $('.slides .slide').first();
  }
  // 切换动画
  currentSlide.stop().slideUp('fast');
  nextSlide.stop().slideDown('fast');
});

// 上一张按钮逻辑
$('.prev-btn').on('click', function() {
  const currentSlide = $('.slides .slide:visible');
  let prevSlide = currentSlide.prev('.slide');
  // 如果当前是第一张，切换到最后一张
  if (!prevSlide.length) {
    prevSlide = $('.slides .slide').last();
  }
  currentSlide.stop().slideUp('fast');
  prevSlide.stop().slideDown('fast');
});

说说你现有代码的小问题 #

你当前的JS用了$(this).next('.slidingDiv')，这要求按钮和.slidingDiv必须是直接相邻的兄弟元素，但如果你的按钮在.btn-wrap里，幻灯片在.slides容器里，这个逻辑就完全失效了。另外你的CSS里设置的是.slide类display:none，但JS操作的是.slidingDiv，类名不统一也会导致动画没效果哦～

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