JQuery ul li选择列表 [英] JQuery ul li select list
本文介绍了JQuery ul li选择列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
尝试使用JQuery使用class next和class prev例如滚动列表。
Trying to use JQuery to scroll through a ul li list using class next and class prev e.g.
<ul class="selectoption">
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
<li> ... </li>
</ul>
<a href="" class="next">Next</a>
<a href="" class="prev">Back</a>
唯一的问题是我只希望所选的li可见。所以不知何故需要索引李的?非常感谢 - 提前感谢
Only thing is I only want the selected li to be visible. So somehow need to index the li's? Help much appreciated - thanks in advance
推荐答案
这应该这样做:
// Hide all but the first
$('.selectoption li').not(':first').hide();
// Handle the click of prev and next links
$('.prev, .next').click(function() {
// Determine the direction, -1 is prev, 1 is next
var dir = $(this).hasClass('prev') ? -1 : 1;
// Get the li that is currently visible
var current = $('.selectoption li:visible');
// Get the element that should be shown next according to direction
var new_el = dir < 0 ? current.prev('li') : current.next('li');
// If we've reached the end, select first/last depending on direction
if(new_el.size() == 0) {
new_el = $('.selectoption li:'+(dir < 0 ? 'last' : 'first'));
}
// Hide them all..
$('.selectoption li').hide();
// And show the new one
new_el.show();
// Prevent the link from actually redirecting the browser somewhere
return false;
});
这篇关于JQuery ul li选择列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文