移动端触屏左右滑动时通过JS/jQuery为HTML元素增减类的实现方法

你当前使用Swiper开发滑块场景，完全不需要自行编写触屏左右滑动的检测逻辑，直接复用Swiper自带的状态回调钩子，就能实现滑动切换时同步更新下方描述内容的效果，稳定性远高于自行监听touch事件，还能兼容PC端拖动、自动播放等其他触发滑块切换的场景。
原问题的核心原因是：你目前的描述切换逻辑只绑定在滑块的click事件上，用户通过触屏滑动切换滑块时，不会触发click事件，导致类名一直保留上一个活动的状态，出现内容和滑块错位的问题。

核心实现步骤 #

1. 抽离公共的描述切换逻辑
   把原本写在点击事件里的类名新增/删除逻辑提取成独立函数，避免点击、滑动两套场景重复写代码，保证逻辑统一：

   // 入参为当前需要展示的描述项索引
   function switchDesc(activeIndex) {
       const descItemList = document.querySelectorAll('.activity-desc-item');
       descItemList.forEach((item, index) => {
           if (index === activeIndex) {
               item.classList.add('desc-active');
           } else {
               item.classList.remove('desc-active');
           }
       })
   }
   

2. 保留原有点击交互逻辑
   把原来的点击事件逻辑替换为调用上述公共函数，不需要重复编写类名操作的代码：

   const slideList = document.querySelectorAll('.swiper-slide');
   slideList.forEach((slide, index) => {
       slide.addEventListener('click', () => {
           // 点击时先让Swiper定位到对应滑块，再同步更新描述
           swiper.slideTo(index);
           switchDesc(index);
       })
   })
   

3. 绑定Swiper自带的切换回调
   在Swiper初始化配置中，挂载slideChange事件回调——只要Swiper的活跃滑块发生变化（无论是用户触屏滑动、PC拖动、代码调用slideTo、自动播放触发），都会自动执行描述更新逻辑，从根源上解决滑动后描述不跟随切换的问题：

   // 初始化Swiper，原有配置全部保留即可
   const swiper = new Swiper('.swiper-container', {
       // 原有配置比如循环模式、触摸参数、分页器等全部沿用
       on: {
           slideChange() {
               // 取Swiper当前的真实活跃索引，调用公共函数更新描述
               switchDesc(swiper.realIndex);
           }
       }
   })
   

注意事项 #

• 如果你的Swiper开启了loop循环轮播模式，一定要使用swiper.realIndex获取真实索引，不要直接用swiper.activeIndex，否则会因为循环克隆的占位slide出现索引错位，导致描述和滑块不匹配。
• 不需要额外编写触屏方向检测、滑动阈值判断的代码，Swiper内部已经做了完善的触控判断逻辑，不会出现用户轻微触碰屏幕就误触发描述切换的问题，回调触发的时机和用户视觉上看到的滑块切换状态完全一致。
• 抽离公共函数后，所有触发滑块切换的场景都会走同一套描述更新逻辑，不会出现不同交互方式下内容错位的问题。

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