javascript - 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应该被隐藏，接下来的两个应该是可见的。同样.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/