JQuery ul li 单击移动到列表中的下一个答案

【问题标题】：JQuery ul li click move to next in listJQuery ul li 单击移动到列表中的下一个
【发布时间】：2010-01-14 17:02:16
【问题描述】：

好的，差不多了，希望使用 Jquery 和 css 类（图像）以相同的方式在 HTML ul li 列表中上下导航，选择选项下拉工作只希望只显示 1 个项目，而不是下拉按钮，但是下一个/上一个 css 类可以通过列表工作，一次只显示一个项目，所以整个效果有点像微调器。例如

$('.next').click (function( MOVE TO NEXT ITEM IN LIST ))
$('.prev').click (function( MOVE TO PREV ITEM IN LIST ))

有点像列表

<ul class="">
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
<li> etc ....
</ul>
<img src="but..." class="next">
<img src="but..." class="prev">

请提出建议 - 提前致谢

【问题讨论】：

标签： jquery drop-down-menu navigation

【解决方案1】：

人们在发布之前需要检查他们的代码！以上答案均无效。

我修好了：

 var active = 0; // starts at zero
 var list = $('ul');

 list.children('li').eq('0').siblings().hide(); // Hide all except first list element

 $('.next').bind('click', function() {
  active = active == list.children('li').length-1 ? 0 : active + 1;
 });

 $('.prev').bind('click', function() {
  active = active == 0 ? list.children('li').length-1 : active - 1;
 });


 var getActive = function() {
  return list.children('li').eq(active);
 };

 $('.prev,.next').bind('click', function() {
  getActive().show().siblings().hide();
 });

【讨论】：

这是最好的答案。tnkx @Moridine

【解决方案2】：

var active = 0; // starts at zero
var list = $('ul');

$('.next').bind('click', function() {
    active = active == list.length-1 ? 0 : active + 1;
});

$('.prev').bind('click', function() {
    active = active == 0 ? list.length-1 ? active - 1;
});

var getActive = function() {
    return list.children('li').eq(active);
};

现在，使用getActive() 获取活动列表元素。

更新：如果你想隐藏除活动列表项之外的所有项目，只需添加：

$('.prev,.next').bind('click', function() {
    getActive().show().siblings().hide();
});

【讨论】：

【解决方案3】：

如果我正确理解您的问题，您一次只希望 1 个列表元素可见。为此，我将修改大卫回答中的函数以执行类似的操作。

var active = 0; // starts at zero
var list = $('ul');

var hideListItems = function(active) {
    $.each(list, function(count, item) {
        if (count !== active) {
            item.css({'display': 'none'});
        } else {
            item.css({'display': 'block'});
        }
    }
};

$('.next').bind('click', function() {
    active = active == list.length-1 ? 0 : active + 1;
    hideListItems(active);
});

$('.prev').bind('click', function() {
    active = active == 0 ? list.length-1 ? active - 1;
    hideListItems(active);
});

【讨论】：