2

これは何日も私を悩ませてきました。. . だから私はこのレイアウトを持っています

<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を表示することですが、1つのdivに制限よりも多くのリストがある場合は、10秒ごとに5(制限)を表示してリストを分割し、最後の1つに到達したらdivをループし続けます..

私は正しい軌道に乗っていますか？または私は別のアプローチが必要ですか？

私はjqueryにかなり慣れていないので、ご容赦ください

4

2 に答える 2

1

クイック デバッグは、それがCookie から取得されcたときであることを示しています。Stringこれを jQuery オブジェクトのインデックスとして使用することはできません。最初に整数に解析する必要があります。したがって、この行：

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

次のように変更します。

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

(基数は、作業している数値システムの基数です。この場合は、基数 10 の 10 進数です)。

> jsFiddle を更新しました(より明確にするために制限を 8 に変更しました)。

(jQuery が文字列を使用して jQuery オブジェクトから n 番目の要素を取得する方法をサポートしているかどうかはわかりませんが、ドキュメントを参照すると、そうではないようです)。

于 2013-05-11T22:22:35.740 に答える
0

今働いている、愚かな私が必要なのは window.setTimeout(changePage, 10000); を呼び出すことだけでした。clearIntervalの後笑..

<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();
于 2013-05-12T23:02:59.637 に答える