[英]How to create simple next and prev trigger button for slider's pagination buttons?
我试图通过单击按钮时在li
之间使用结合each()
和eq()
方法来携带一个类。 除了i+1
和i-1
之外, i+1
在上一个和下一个按钮上使用的是相同的代码,但它给我带来了不同的问题。
的HTML:
<span class="prev">prev</span>
<ul>
<li>0</li>
<li>1</li>
<li class="active">2</li>
<li>3</li>
<li>4</li>
</ul>
<span class="next">next</span>
jQuery的:
var li = $('li');
$('.prev').click(function() {
li.each(function(i) {
if ( $(this).hasClass('active') ) {
console.log(i);
//this returning current true value = 2
li.removeClass('active');
li.eq(i-1).addClass('active');
//this is working better
//problem is: not selecting 4
}
});
});
$('.next').click(function() {
li.each(function(i) {
if ( $(this).hasClass('active') ) {
console.log(i);
//this returning current true value = 2
//problem starts:
//li.removeClass('active');
//when this is active; all active classes are gone
li.eq(i+1).addClass('active');
//try to select next 'li' here
//but it is selecting all li's bigger than current value
}
});
});
我会尝试使用更多类似的东西:
$(".next").click(function(){
if($("li.active").next().length > 0){
$("li.active").removeClass("active").next("li").addClass("active");
}
});
$(".prev").click(function(){
if($("li.active").prev().length > 0){
$("li.active").removeClass("active").prev("li").addClass("active");
}
});
使用“下一个”选择器: jQuery Next
我会尽可能避免数学运算。 很难计数:-)。 就是说,我认为您上面的问题可能与索引有关。 很难说。 处理这样的列表时,我会避免使用“ li”之类的选择器。 尝试在该类的“ ul”部分放置一个类,并将您的li命名为:“ .myList li”
您应该return false;
在您找到第一类active
: http : //jsfiddle.net/ufomammut66/np4Pt/
发生的事情是您迭代前进的元素并按顺序更改每个元素。 因此,当您遍历每种情况时,将下一个依次设置为活动状态,这又会使下一个$(this).hasClass('active')
检查为true。 这就是为什么prev事件起作用的原因,我们以循环的相反顺序进行移动。 因此,我们只需要在找到活动案例后就停止对集合进行迭代。
编辑1
您可以在任何选定对象上使用.length
来获取返回的数量。 因此,在您提供的示例代码中,我们可以使用li.length
来获取页面上有多少li元素。 您可能想使用类选择器只是为了确保不使用其他li元素来计算您的上限。 我已经更新了jsFiddle以反映这些更改。
如果出于某种原因需要索引,则可以始终执行以下操作:
$('.prev').on('click', function() {
var i = $(".active").index();
i--;
$(".active").removeClass('active');
$('li').eq(i).addClass('active');
});
$('.next').on('click', function() {
var i = $(".active").index();
i = i >= $('li').length-1 ? 0 : i+1;
$(".active").removeClass('active');
$('li').eq(i).addClass('active');
});
如果不 :
$('.prev, .next').on('click', function() {
if ($(".active")[$(this).attr('class')]().index()!=-1)
$(".active").removeClass('active')[$(this).attr('class')]().addClass('active');
});
您甚至可以尝试:
$('.prev').click(function() {
var el = $.find('li[class=active]');
//check if are prev li
if(!$(el).prev().is(':first')) $(el).removeClass('active').prev().addClass('active');
});
$('.next').click(function() {
var el = $.find('li[class=active]');
//check if are next li
if(!$(el).next().is(':last')) $(el).removeClass('active').next().addClass('active');
});
var li = $("li");
$(".prev").click(function() {
var activeLI = $("li.active");
var index = $(activeLI).index();
$(activeLI).removeClass('active');
if (index > 0) {
$(activeLI).prev().addClass('active');
} else {
$(li).last().addClass('active');
}
});
$(".next").click(function() {
var activeLI = $("li.active");
var index = $(activeLI).index() + 1;
$(activeLI).removeClass('active');
if (index < li.length) {
$(activeLI).next().addClass('active');
} else {
$(li).first().addClass('active');
}
});
这将循环到最后一个元素处于活动状态(如果前一个在前)和第一个元素处于活动状态(如果下一个在后一个)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.