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。同样地，{{1}}也应该相反。

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/

Jquery帮助寻呼机和显示元素。

2 个答案: