JQuery移除类后addClass失效求助：滑块下一页按钮代码异常

算力阿峰

2026-5-25

排查jQuery滑块下一页按钮的循环逻辑问题

我来帮你分析下这个滑块循环失效的问题～先把你的代码贴出来方便对照：

function sliderNext() { 
var sliderItemsCount=$('#usersToolsSlider li').length; 
if($('.show').last().index()>=(sliderItemsCount-1)){ 
$('#usersToolsSlider li:first').addClass('show'); 
} else { 
$('.show').next('li').addClass('show'); 
} 
$('.show').first().removeClass('show');
}

问题根源

你的代码执行顺序导致了循环逻辑失效：
当滑块已经滑到最后一个元素时，你先给第一个li加上了show类，这时候页面上有两个带show类的元素——原来的最后一个li和刚添加的第一个li。紧接着你执行$('.show').first().removeClass('show')，而jQuery的选择器是按DOM顺序返回元素的，第一个li在DOM里排最前面，所以刚加上的show类立刻被移除了，自然看起来没生效。

修复方案

调整逻辑顺序，先移除当前的show类，再添加新的，这样每次只会有一个元素保持show状态：

function sliderNext() { 
  var sliderItemsCount = $('#usersToolsSlider li').length; 
  // 先获取当前显示的最后一个元素
  var currentLastShow = $('.show').last();
  
  // 先移除当前的show类
  currentLastShow.removeClass('show');
  
  if(currentLastShow.index() >= (sliderItemsCount - 1)){ 
    // 滑到最后一个，切换到第一个
    $('#usersToolsSlider li:first').addClass('show'); 
  } else { 
    // 否则切换到下一个元素
    currentLastShow.next('li').addClass('show'); 
  }
}