jQuery幫助頁面和顯示元素。

Question

我有這樣的ul li結構：

<div>
    <a href="#" class="next"></a>
    <a href="#" class="prev"></a>
    <ul>
        <li class="element element1"></li>
        <li class="element element2"></li>
        <li class="element element3"></li>
        <li class="element element1"></li>
        <li class="element element2"></li>
        <li class="element element3"></li>
        <li class="element element1"></li>
        <li class="element element2"></li>
    </ul>
</div>

最初，我只希望頁面加載時前兩個li可見。 單擊.next錨標記時，前兩個li應該被隱藏，接下來的兩個li應該是可見的。 同樣， .previous應該相反。

Answer 1

非常快速和骯臟的概念

http://jsfiddle.net/ULnd5/

Answer 2

$(function(){

    var cur_el = 1;  

    $('.next, .prev').click(function(event){
        event.preventDefault();
        show_lis($(this).attr('class'));
    });

    function show_lis(dir){

        cur_el = (dir == 'next') ? cur_el + 2 : cur_el - 2;

        if(cur_el >= $('#my_list li').length+1)
        {
            cur_el = 1;
        }
        if(cur_el <= 0)
        {
            cur_el = $('#my_list li').length-1;
        }

        $('#my_list li').hide().siblings(':nth-child('+cur_el+')').show().next().show();
    }
});

工作演示： http : //jsfiddle.net/AlienWebguy/kkdrs/