2

如果您查看界面顶部，我有 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;
}
4

2 回答 2

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

    });
});​​
于 2012-11-13T13:52:19.900 回答
0

jsBin 演示

如果您将最初设置为“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()

于 2012-11-13T14:26:00.300 回答