jQuery Prev下一次插件增强
jQuery Prev下一次插件增强
提问于 2012-02-14 12:10:15
我需要通过元素与前和下一个按钮。下面是HTML：
<ul>
<li><a href="#">Number 1 item</a></li>
<li><a href="#">Number 2 item</a></li>
<li><a href="#">Number 3 item</a></li>
<li><a href="#">Number 4 item</a></li>
</ul>
<input type="button" class="next" value=">" />
<input type="button" class="prev" value="<" />联署材料：
(function(){
var $lis = $('ul li');
var index = 0, lastIndex = 0;
start(); // activate first, add event listeners to buttons
function next(){
lastIndex = index;
if(++index == $lis.length) index = 0; // if next is out of bounds go to first
$lis.eq(index).addClass('active');
$lis.eq(lastIndex).removeClass('active');
};
function prev(){
lastIndex = index;
if(--index < 0) index = ($lis.length - 1); // if prev is less than first to to last
$lis.eq(index).addClass('active');
$lis.eq(lastIndex).removeClass('active');
};
function start(){
$lis.eq(0).addClass('active');
$('.next').click(next);
$('.prev').click(prev);
}
})();这个插件工作得很好，这是小提琴
但我想扩展它的功能。我还想直接单击list &记住它的索引。
我的意思是:当我点击“下一步”按钮时，我一直到第三项，如果我直接点击
<li><a href="#">Number 1 item</a></li> (项目编号:1)然后我想记住我的这个位置作为当前索引&当我点击next按钮时，我应该移到第2项。
同样的事情也适用于前一个按钮。
如何扩展此功能？
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-02-14 12:15:12
function li_click(){
lastIndex = index;
index = $(this).index();
$lis.eq(index).addClass('active');
$lis.eq(lastIndex).removeClass('active');
}
function start(){
$lis.eq(0).addClass('active');
$('.next').click(next);
$('.prev').click(prev);
$lis.click(li_click);
}下面是您的JSFiddle：http://jsfiddle.net/Rtmdj/15/的更新版本
而且，看起来您并不真的需要lastIndex变量，您只需删除active类，更改index，然后将active类添加到新的index
$lis.eq(index).removeClass('active');
index = $(this).index();
$lis.eq(index).addClass('active');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9283496
复制相关文章
相似问题
哪个版本的X引入了特征Y？
如何确定要安装哪个内核版本？
如何确定我正在构建的RHEL的哪个版本？
libvirt支持哪个版本的VBOX？
哪个版本的unix来自shell？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
