2

appendTo() で追加された要素が DOM ですぐに利用できないという問題があります。

まず、JSON ファイルからいくつかのデータを読み取ってから、いくつかの html を div に追加しています。次に、ランダム シャフラー プラグインを呼び出して、追加された div の 1 つを一度に表示します。

    jsonUrl = "js/performers.json";

    $.getJSON(jsonUrl, function(json) {
        $.each(json.performers, function(i, performer) {
            var html = '<div class="performer_mini">';
            html += '<img src="' + performer.thumbnail + '" alt="' + performer.name + '" /><br />';
            html += performer.name + '<br /></div>';
            $(html).appendTo("div#performer_spotlight");
        });
    });

    $("#performer_spotlight").randomShuffler(".performer_mini", 3000, 3000, 9000);

ランダム シャフラーは次のことを行います。

(function($) {
    $.fn.randomShuffler = function(shuffledElements, fadeInTime, fadeOutTime, timeout) {
        fadeInTime = fadeInTime || 3000;
        fadeOutTime = fadeOutTime || 3000;
        timeout = timeout || 9000;

        $(shuffledElements).hide();

        var $old_element;
        var $new_element;
        var old_index = 0;
        var new_index = 0;

        function shuffleElement() {
            $old_element = $new_element;
            old_index = new_index;
            while ($(shuffledElements).length > 0 && old_index == new_index) { // don't display the same element twice in a row
                new_index = Math.floor(Math.random()*$(shuffledElements).length);
            }
            $new_element = $(shuffledElements + ":eq(" + new_index + ")");
            if ($old_element != undefined) {
                $old_element.fadeOut(fadeOutTime, function() {
                    $new_element.fadeIn(fadeInTime);
                });
            } else {
                $new_element.fadeIn(fadeInTime);
            }
            setTimeout(shuffleElement, timeout);
        }

        $(this).show();
        shuffleElement();
    }
})(jQuery);

shuffleElement() 関数が初めて呼び出されたとき、$(shuffledElements).length は 0 に等しいため、要素は表示されません。shuffleElement() の次の呼び出しでは、appendTo() で追加された要素が使用可能になり、期待どおりランダムに選択されます。その後、すべてが正しく機能します。

appendTo() で要素を追加した直後に、DOM を更新したり、これらの要素を jQuery で使用できるようにする方法はありますか? これを達成する方法について他に提案はありますか？

4

2 に答える 2

3

randomShuffler を正確に呼び出すのはいつですか? AJAX リクエストが成功した後にこの関数を呼び出しますか? 私は常に、appendTo によって追加された要素は追加直後に利用できると信じてきました。

このコードは私にとって非常にうまく機能します： 

<script language="javascript">
    var test = "<div class=\"test\">1</div>";
    $(test).appendTo("div#performer_spotlight");
    $("div.test").html("<b>Hello</b>");
</script>
于 2010-05-05T16:25:39.273 に答える
1

はい、@MeF Convi が言うように、getJSON が終了した後にのみプラグインを呼び出す必要があります。

$.getJSON(jsonUrl, function(json) {
    $.each(json.performers, function(i, performer) {
        var html = '<div class="performer_mini">';
        html += '<img src="' + performer.thumbnail + '" alt="' + performer.name + '" /><br />';
        html += performer.name + '<br /></div>';
        $(html).appendTo("div#performer_spotlight");
    });
    $("#performer_spotlight").randomShuffler(".performer_mini", 3000, 3000, 9000);
});
于 2010-05-05T16:29:06.557 に答える