Question

这是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');}

删除课程后，此行

$('#usersToolsSlider li:first').addClass('show');

不起作用

Answer 1

当你从最后一个元素移动到第一个元素时，这一行：

$('.show').first().removeClass('show');

正在删除＆＃39; show＆＃39;来自您之前添加的第一个元素的类。

更清洁，更实用的版本：

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

    $('.show').removeClass('show');
    nextVisibleElement.addClass('show');
}

Answer 2

尝试使用jQuery＆＃39; .hide()，.show()和.is(':visible')代替。这样可以防止需要打开和关闭类。

function sliderNext() {    
  //hide the current visible slider and keep it for comparison
  const previousVisible = $('#usersToolsSlider li:visible').hide();

  if(previousVisible[0] == $('#usersToolsSlider li:last')[0]) {
    //If the last slider was visible, show the first slider
    $('#usersToolsSlider li:first').show();
  } else {
    //Else show the next slider
    previousVisible.next().show();
  }
}

<强>的jsfiddle https://jsfiddle.net/nx8u5kqo/2/

删除类后，Jquery addClass无法正常工作

2 个答案: