一系列列表项的导航循环答案

【问题标题】：Navigation loop for a sequence of list items一系列列表项的导航循环
【发布时间】：2012-11-01 21:49:29
【问题描述】：

如果您查看界面顶部，我有 7 个图标。每个图标都有一个对应的标签（使用<li>）。当我单击“下一步”按钮时，我想显示下一个标签 <li> 并隐藏前一个标签。我需要循环发生这种情况，这样一旦我们到达最后一个<li>，它就会循环。

我显然需要与此相反的后退按钮。到目前为止我的代码：

$('#next2').click(function() {
    var nextItem = $('#labels li.select').hide().next('#labels li');
    if (nextItem.length === 0) {
        nextItem = $('#labels li').first();
    }

    nextItem.fadeIn().addClass('select');
    $('#labels li.select').prev().hide();
});

$('#prev2').click(function() {
    var prevItem = $('#labels li.select').hide().prev('#labels li');
    if (prevItem.length === 0) {
        prevItem = $('#labels li').last();
    }

    prevItem.fadeIn().addClass('select');
    $('#labels li.select').next().hide();
});

HTML

<div style="margin-left:8%; margin-bottom:10px;">
    <ul id="labels">
        <li id="label-discover" class="select">Discover </li>
        <li id="label-collaborate">Collaborate </li>
        <li id="label-create">Create </li>
        <li id="label-develop">Develop </li>
        <li id="label-launch">Launch </li>
        <li id="label-maintain">Maintain </li>
        <li id="label-learn">Learn </li>
    </ul>
</div>

CSS

#labels li {
    font-family: 'ArvoBold';
    line-height: 100%;
    font-size: 100%;
    color:#FFF;
    margin-bottom:7px;
    text-align:left;
    display:inline;
    display:none;
    text-transform:capitalize;
}

#labels li.deselect {
    display:none;
}

#labels li.select {
    display:inline;
}

【问题讨论】：

为什么你没有的代码对你不起作用？您能否也请发布您的 HTML
只需使用jCarousel，它具有所有功能，您可以使用回调来更改页面的其他部分（如菜单）。
我已经完成了大部分编码，这基本上是唯一剩下的功能了。
我的“下一个”循环由于某种原因而中断，我的“返回”循环不会继续转到第一个元素而不是前一个元素。

标签： jquery loops iteration

【解决方案1】：

不确定这是否是您所追求的，但我很快就完成了：

预览：JSFiddle

$(document).ready(function() {
    var total= $('#labels').children().length - 1;
    var current = 0;

    $('#prev').click(function(e) {
        /* Stop page refreshing on anchor click */
        e.preventDefault();

        $('#labels').children().eq(current).hide();

        if(current === 0)
            current = total;
        else
            current--;

        $('#labels').children().eq(current).show();

    });

    $('#next').click(function(e) {
        /* Stop page refreshing on anchor click */
        e.preventDefault();

        $('#labels').children().eq(current).hide();

        if(current === total)
            current = 0;
        else
            current++;

        $('#labels').children().eq(current).show();

    });
});

【讨论】：

非常感谢您！正是我想要的。

【解决方案2】：

jsBin demo

如果您将最初设置为“0”的计数器设置为“0”并且您知道页码：

var pagesN = 7 // or use: $('childrensOfSomeElement').length;
var c = 0;


 $('#prev, #next').click(function(){
    
    // logic //
    var myID = this.id=='next' ? c++ : c--;  
    c= c===-1? pagesN-1 : c%pagesN ;  
   
    console.log( c );

 });

点击后，您可以使用.eq() 方法定位您想要的ANY子元素

【讨论】：