当我点击下一个和上一个箭头时，添加和删除分页.active类

Question

我在更改第1,2,3,4,5页

时添加了这个pagination.js脚本

$(document).ready(function(){
  var $listItems = $('.pagination li');

  $listItems.click(function(){
    $listItems.removeClass('active');
    $(this).addClass('active');  

  });
});

我想为carrousel的prev和下一个箭头添加一个函数，当你点击箭头时，该函数会删除上一页的.active类，并在下一页中添加.class。

箭头控制代码：

<div class="arrowPosition2"> 
              <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left arrowSlider"></span>
              </a>
              <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right arrowSlider"></span>
              </a>
</div>

我的英语不是很好，你可以看到这个截图： screenshot http://i60.tinypic.com/jrttnq.jpg

非常感谢。

编辑：

 <div class="arrowPosition2"> 
              <a id="arrowPrev" class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left arrowSlider"></span>
              </a>
              <a id="arrowNext" class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right arrowSlider"></span>
              </a>
 </div>

$(document).ready(function(){
  var $listItems = $('.pagination li');
  var $arrowItems = $('.arrowPosition2 a');

  $listItems.click(function(){
    $listItems.removeClass('active');
    $(this).addClass('active');  
    var activeLink=$(this);
  });

     $('#arrowPrev').on('click',function(){
    var $activeLi=$('.pagination').find("li.active");
    $activeLi.removeClass('active');

    if($activeLi.prev()!=null && $activeLi.prev()!=undefined ){
    $activeLi.prev().addClass('active');  
    }else{
    $('.pagination').find("li:last").addClass("active")
    }
    });

     $('#arrowNext').on('click',function(){
    var $activeLi=$('.pagination').find("li.active");
    $activeLi.removeClass('active');

    if($activeLi.next()!=null && $activeLi.next()!=undefined ){
    $activeLi.next().addClass('active');  
    }else{
    $('.pagination').find("li:last").addClass("active")
    }
    });


});

Answer 1

Plz如果条件改变

if($activeLi.next().length>0 ){
$activeLi.next().addClass('active');  
}else{
$('.pagination').find("li:first").addClass("active")
}

Answer 2

我认为这会对你有所帮助

var activeLink;

$(document).ready(function(){
  var $listItems = $('.pagination li');

  $listItems.click(function(){
  $listItems.removeClass('active');
  $(this).addClass('active');  
  var activeLink=$(this);////  store in variable and do work on pev next btn
  });
});

Answer 3

$('#Arrow').on('click',function(){
var $activeLi=$('.pagination').find("li.active");
$activeLi.removeClass('active');

if($activeLi.prev()!=null && $activeLi.prev()!=undefined ){
$activeLi.prev()..addClass('active');  
}else{
$('.pagination').find("li:last").addClass("active")
}
});

Answer 4

$('#NEXT_ARROW_ID').on('click',function(){
var $activeLi=$('.pagination').find("li.active");
$activeLi.removeClass('active');

if($activeLi.next()!=null && $activeLi.next()!=undefined ){
$activeLi.next().addClass('active');  
}else{
$('.pagination').find("li:first").addClass("active")
}
});

Answer 5

这是你的：pagination.js

$(document).ready(function(){
  var $listItems = $('.pagination li');
var $arrowItems = $('.arrowPosition2 a');

 $listItems.click(function(){
$listItems.removeClass('active');
$(this).addClass('active');  
var activeLink=$(this);
});

 $('#arrowPrev').on('click',function(){
var $activeLi=$('.pagination').find("li.active");
$activeLi.removeClass('active');

if($activeLi.prev().length>0 ){
$activeLi.prev().addClass('active');  
}else{
$('.pagination').find("li:last").addClass("active")
}
});

$('#arrowNext').on('click',function(){
var $activeLi=$('.pagination').find("li.active");
$activeLi.removeClass('active');

if($activeLi.next().length>0){
$activeLi.next().addClass('active');  
 }else{
$('.pagination').find("li:first").addClass("active")
}
});


});