Question

如果你看一下界面的顶部，我有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;
}

Answer 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();

    });
});

Answer 2

jsBin demo

如果您最初将计数器设置为“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 子元素

一系列列表项的导航循环

2 个答案:

jsBin demo