0

ajaxを介してより多くのコンテンツをロードする機能を持つ画像リストがあります。デフォルトでは、リストにロードされた画像があります。ユーザーがスクロールすると、さらに4つのアイテムがリストに追加されます。リストは15秒ごとにajaxを介して更新され、リストの上位7つのアイテムを置き換えるだけです。問題は、4つの新しいアイテムがリストに追加されると、セレクターがそれらのアイテムを無視しているように見えるため、0のインデックスから選択されないことです。

これは紛らわしいように聞こえるので、簡単な例でデモを試してみます。

元

$(function () {
    // Update ChannelStats
    setTimeout(function () {
        var refresh = setInterval(UpdateChannels, 15000);
        UpdateChannels();
    }, 15000);

    function UpdateChannels() {
        $.ajax({
            type: "POST",
            url: "ajax/ImageList.aspx/UpdateImages",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                // Newest
                var $newestResults = $('#newest .pcVideomaincontainer:lt(7)');
                $newestResults.fadeOut('slow'), function () {
                    remove()
                };
                $.each($newestResults, function (index, value) {
                    $(this).delay(index * 250).animate({
                        opacity: 0
                    }, 250,

                    function () {
                        $(this).remove();
                        $('#pcContentHolder_newest').append(data.d.Newest.HtmlChannelSegments[index]);
                    });
                });
            });
        }
    });

[番号の順序に注意してください-これは画像が読み込まれる順序です]

最初のページの読み込み時に、最初の画像が読み込まれます

　1.最初のページの読み込み時に次の画像が読み込まれます

1 2 3 4 5 6 7

　2.ユーザーがスクロールすると、残りの画像が表示されます

1 2 3 4 5 6 7 8 9 10 11

　3.更新スクリプトが最初に実行されます

8 9 10 11 1 2 3 4 5 6 7

　4.更新スクリプトは2回実行されます

4 5 6 7 1 2 3 4 5 6 7

　5.更新スクリプトが実行されるたびに、順序は次のようになります。

4 5 6 7 1 2 3 4 5 6 7

私が知る限り、これらの4つの新しく追加された要素は $('#newest .pcVideomaincontainer:lt(7)')選択に含まれていません。このシナリオで「ライブ」をどのように使用できるか、または他の手法があるかどうかはわかりません。

4

2 に答える 2

0

これがあなたの主な問題であるかどうかはわかりませんが、コードのこの部分には$(this).前が欠けてremove()おり、最後の親も欠けています。あなたはこれを持っています：

            var $newestResults = $('#newest .pcVideomaincontainer:lt(7)');
            $newestResults.fadeOut('slow'), function () {
                remove()
            };

これである必要があります：

            var $newestResults = $('#newest .pcVideomaincontainer:lt(7)');
            $newestResults.fadeOut('slow'), function () {
                $(this).remove()
            });

これを修正すると、$ newestResults DOMオブジェクトがすべて削除されるため、次のコード行を使用してオブジェクトを再度操作しようとする理由がわかりません。

于 2012-07-07T00:04:13.300 に答える
0

appendからprependに変更しましたが、現在は機能しています。

于 2012-07-10T22:30:15.080 に答える