Попытка использовать JQuery для просмотра списка лития ул. с помощью класса затем и предыдущего класса, например.
<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>
Только вещь, я только хочу, чтобы выбранный литий был видим. Так так или иначе должен индексировать литий? Помогите многому ценившему - заранее спасибо
Это должно сделать это:
// 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;
});
Попробуйте что-то вроде:
$(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;
})
});
с объектом данных в jQuery, вы можете связать какие-либо данные JavaScript с элементом DOM. Я использовал это, чтобы сохранить состояние списка.
Вы можете добавить охранников для первого и последнего элемента в следующих / предыдущих шагах.
Если вам нужен ваш индекс, используйте следующее:
$("#selectoption>li").click(function(){
alert($(this).index());
});
Хотя вместо этого я бы посмотрел на ответ Тату Ульманена.