使用jquery基于li项的大小隐藏按钮

时间:2014-05-08 05:22:15

标签: jquery

我需要隐藏"next"& "prev"按钮基于list items的显示。如果我已达到最大列表项,我将无法再次看到"Next"按钮,因为这是"Prev"按钮的最大值和相同值,如果我达到初始点,请说{ {1}},它应1

我的代码是

hide

Fiddle

1 个答案:

答案 0 :(得分:0)

在此尝试:

$(document).ready(function() {

    var p;
    for(i=0;i<=$('#myList li').size(); i++){        
        p=i*20;
        $('#myList li:lt(5)').animate({"margin-left":"-"+p+"px"},1000).delay(5000);        

    }
 var $lis = $("#myList li").hide();
    $lis.slice(0, 5).show();
    var size_li = $lis.length;
    var x = 5,
        start = 0;
    $('#next').click(function () {
        if (start + x < size_li) {
            $lis.slice(start, start + x).hide();
            start += x;
            $lis.slice(start, start + x).show();            
            // Confused here
            if(parseInt(start) == 10) {
                $('#next').css('display','none');
            }
        }
        showHideButtons()
    });
    $('#prev').click(function () {
        if (start - x >= 0) {
            $lis.slice(start, start + x).hide();
            start -= x;
            $lis.slice(start, start + x).show();
        }
        showHideButtons();
    });
    function showHideButtons(){
        if (start == 0){
            $('#next').show();
            $('#prev').hide();
        }else if (start + x > size_li){
            $('#next').hide();
            $('#prev').show();
        }else{
            $('#next').show();
            $('#prev').show();
        } 
    }
    showHideButtons()
});

这里是fiddle

相关问题