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

【问题标题】：Add and remove pagination .active class when I click in next and prev arrows当我单击下一个和上一个箭头时添加和删除分页 .active 类
【发布时间】：2014-06-13 15:33:06
【问题描述】：

当您更改页面 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和next箭头添加一个函数，当你点击箭头时，该函数删除上一页的class .active并在下一页添加.class active。

箭头控件代码：

<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>

我的英文不是很好，你可以看这个截图：

非常感谢。

编辑：

 <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")
    }
    });


});

【问题讨论】：

你能用feddle写你的代码吗jsfiddle.net
Call next and prev function of jquery jCarousel的可能重复

标签： javascript jquery pagination

【解决方案1】：

如果有条件请更改

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

【讨论】：

【解决方案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
  });
});

【讨论】：

谢谢，我存储了变量，但是，¿函数是如何工作的？我是 javascript 的初学者。我用箭头控件代码编辑了主帖。

【解决方案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")
}
});

【讨论】：

将 $('#Arrow') 更改为 $('.arrowPosition2')
哦，谢谢，这适用于 prevArrow，但我也有一个 nextArrow，¿使用相同的功能？
告诉我所有两个箭头都有相同的类或差异？
我正在编辑主帖，现在可以使用 next 和 prev 箭头，我使用了 #arrowLeft 和 #arrowNext，我将您的 #arrowLeft 函数 prev() 更改为 next()。但是，当 .active 类在最后一页时， .active 类就消失了。
检查下一个 if($activeLi.next()!=null && $activeLi.next()!=undefined ){

【解决方案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")
}
});

【讨论】：

最后会发生什么？
你可以试试我的代码：link
请检查我刚刚添加了新答案，我认为它会对您有所帮助
我已经在您的链接中进行了测试，如果条件正常，您需要更改

【解决方案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")
}
});


});

【讨论】：