JQuery ul li 选择列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2071189/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery ul li select list
提问by russell
Trying to use JQuery to scroll through a ul li list using class next and class prev e.g.
尝试使用 JQuery 使用 class next 和 class prev 滚动 ul li 列表，例如
<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>
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
唯一的问题是我只希望所选的 li 可见。所以不知何故需要索引li的？非常感谢帮助 - 提前致谢
回答by Tatu Ulmanen
This should do it:
这应该这样做：
// 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;
});
回答by Scharrels
Try something like:
尝试类似：
$(function(){
// initialization
$(".selectoption").data("index",1).find("li:not(:first)").hide();
// previous
$(".previous").click(function(){
$(".selectoption").data(
"index",
$(".selectoption").data("index") - 1
);
$(".selectoption li").hide().eq($(".selectoption").data("index")).show();
return false;
});
// next
$(".next").click(function(){
$(".selectoption").data(
"index",
$(".selectoption").data("index") + 1
);
$(".selectoption li").hide().eq($(".selectoption").data("index")).show();
return false;
})
});
With the data object in jQuery, you can associate any kind of javascript data with a dom element. I have used this to save the state of the list.
使用 jQuery 中的数据对象，您可以将任何类型的 javascript 数据与 dom 元素相关联。我用它来保存列表的状态。
You might want to add guards for the first and last item in the next / previous steps.
您可能希望在下一步/之前的步骤中为第一项和最后一项添加保护。
回答by James Wiseman
If you want your index, use the following:
如果您想要索引，请使用以下命令：
$("#selectoption>li").click(function(){
alert($(this).index());
});
Although I would look at Tatu Ulmanen's answer instead.
虽然我会看 Tatu Ulmanen 的回答。
