Question

这已经困扰了我好几天了。。。所以我有这个布局

<div class='body1'>
    <ul id='list1'>
        <li class='heading'>Name</li>
        <li>Name 1</li>
        <li>Name 2</li>
        <li>Name 3</li>
    </ul>
</div>
<div class='body1'>
    <ul id='list2'>
        <li class='heading'>Name</li>
        <li>Name 1</li>
        <li>Name 2</li>
        <li>Name 3</li>
    </ul>
</div>
<div class='body1'>
    <ul id='list3'>
        <li class='heading'>Name</li>
        <li>Name 1</li>
        <li>Name 2</li>
        <li>Name 3</li>
    </ul>
</div>

这是我的功能

function changePage(){
    var limit = 5; //number of list to show
    var pages = $(".body1");
    var pageul = $(".body1 ul");
    if ($.cookie('pg') == null || $.cookie('pg') >= pages.length){
        $.cookie('pg', 0); // just the cookie to retain current div on display when refresh
    }
    var c = $.cookie('pg');
    $(pages).hide(); // hide all divs
    $(pageul).find('li').hide(); // hide all list inside divs
    $(pages[c]).fadeIn(2000); //fade in the page with index cookie
    $(pages[c]).find('li:lt('+limit+')').fadeIn(2000); //fadein the lists
    c++; //increment
    $.cookie('pg', c); //then store as cookie
    window.setTimeout(changePage, 10000); //run every 10 sec
}

我想要做的是以10秒的间隔显示循环中的所有div，但是如果一个div有超过限制的列表，则通过每10秒显示5（限制）来分割列表，当到达最后一个然后继续循环div ..

我正走在正确的轨道上吗？或者我需要采用不同的方法？

我对jquery很新，所以请耐心等待我

Answer 1

快速调试显示从Cookie中检索c为String。您不能将其用作jQuery对象的索引，您需要先将其解析为整数。所以这一行：

var c = $.cookie('pg');

变更为：

var c = parseInt($.cookie('pg'), 10); // parseInt(string, radix)

_{（基数是您正在使用的数字系统的基础，在本例中为十进制又称为基数10）。}

＆GT; updated jsFiddle （我将限制更改为8以使其更清晰）。

_{（我不知道jQuery是否支持从带有字符串的jQuery对象中检索第n个元素的方法，但是通过the docs似乎不是这样的。）< /子>}

Answer 2

现在工作，愚蠢我只需要调用window.setTimeout（changePage，10000）;在clearInterval之后lol ..

<div class='body1'>
    <ul id='list1'>
        <li class='heading'>Name</li>
        <li>Name 1</li>
        <li>Name 2</li>
        <li>Name 3</li>
    </ul>
</div>
<div class='body1'>
    <ul id='list2'>
        <li class='heading'>Name</li>
        <li>Name 1</li>
        <li>Name 2</li>
        <li>Name 3</li>
        <li>Name 4</li>
        <li>Name 5</li>
        <li>Name 6</li>
        <li>Name 7</li>        
    </ul>
</div>
<div class='body1'>
    <ul id='list3'>
        <li class='heading'>Name</li>
        <li>Name 1</li>
        <li>Name 2</li>
        <li>Name 3</li>
    </ul>
</div>

function changePage(){
    var limit = 6; //number of list to show
    var pages = $(".body1");
    if ($.cookie('pg') == null || $.cookie('pg') >= pages.length){$.cookie('pg', 0);} // just the cookie to retain current div on display when refresh
    var c = $.cookie('pg');
    $(pages).hide(); // hide all divs
    $(pages).find('li').hide(); // hide all list inside divs
    $(pages[c]).fadeIn(2000); //fade in the page with index cookie
    if($(pages[c]).find("ul li:not(.heading)").length > limit){
        $(pages).find('li:lt('+(limit+1)+')').fadeIn(2000);
        var grpli = Math.ceil($(pages[c]).find("ul li:not(.heading)").length/limit);
        var timesRun = 0;
        var interval = setInterval(function(){
            timesRun += 1; //increment
            gt = (limit*(timesRun+1))-5;
            if(timesRun === grpli-1){clearInterval(interval); window.setTimeout(changePage, 10000);}else{window.clearTimeout(timer);} // fixed by calling setTime out again
            $(pages).find('li:not(.heading)').hide(); //hide all lists again
            $(pages).find('li:gt('+gt+'):lt('+gt+')').fadeIn(2000); //show 5 lists between gt and lt
        }, 10000); 
    }else{
        $(pages[c]).find('li:lt('+limit+')').fadeIn(2000);
    }
    c++; //increment
    $.cookie('pg', c); //then store as cookie
    var timer = window.setTimeout(changePage, 10000); //run every 10 sec
}
changePage();

jQuery一次显示5个列表

2 个答案: