1

次のような ajax 経由で読み込まれた画像: 画像はタグに含まれています

$('#sandbox').load('./ajax/profile.html li a:eq(1),li a:eq(2),li a:eq(3)').hide();

ここで、タグ付きの画像を「エラスティスライド」と呼ばれるカルーセルに挿入したいと考えています。以下のコードは動作します。助けてください!

for (k=0; k<=$('#sandbox').children().length;k++){
            var ajaximg = $('#sandbox').children()[k];
            var $q = $('<li>'+ajaximg+'</li> ');
            $('#carousel3').append($q);
            $('#carousel3').elastislide( 'add', $q );
        };
4

2 に答える 2

1

IMO の変更が必要な点は 2 つあります。

  1. var ajaximg = $('#sandbox').children()[k]var ajaximg = $('#sandbox').children().eq(k)代わりに使用できるjqueryオブジェクトではなくDOM要素を提供します 。しかし、使用する方が良い$(this)です;

  2. $q = $('<li>'+ajaximg+'</li> '); 変数をに変更var $q = $('<li>').append($(this));

あなたのコードは

    for (k=0; k<=$('#sandbox').children().length;k++){
        //  var ajaximg = $('#sandbox').children()[k];
        var $q = $('<li>').append($(this));
        $('#carousel3').append($q);
        $('#carousel3').elastislide( 'add', $q );
    };
于 2012-11-19T09:08:33.630 に答える
1

上記のコードは、次のコードで修正できます。

$('#sandbox').load('./ajax/profile.html li a', function(result){
    $(result).find('li a').each(function(){
        var $q = $('<li>').append($(this));
        $('#carousel3').append($q);
        $q.add();       
    });
});

アイデアは ajax を介して #carousel に画像をロードすることだったので、以下のコードは最初に #sandbox にロードせずにすべてを実行します。以下のようにドキュメントがロードされたときに .elastislide() 関数が呼び出されることが重要です。これは、画像<li><a><img.../></a></li>が追加された後であるためです。そうしないと、カルーセルに表示されません。

$('#carousel3').load('./ajax/profile.html li');
        window.onload = initStyle;
        function initStyle() {
            $( '#carousel1' ).elastislide( {minItems : 2} );
            $( '#carousel2' ).elastislide( {minItems : 2} );
            $( '#carousel3' ).elastislide( {minItems : 2} );

        };
于 2012-11-21T16:02:00.807 に答える