-1

私はここ数日間、この半特定の問題を理解しようとしてきましたが、本当に別の目を使うことができました。

私の目標は、ページに画像を表示することです。最初は静的 png で、クリックすると .gif に切り替わり、アニメーションが再生されます。もう一度クリックすると、再びスワップし、2 番目の .gif アニメーションを再生します。3回目も同じことをします。3 番目の .gif をクリックすると、最初の gif アニメーションが再び再生され、プロセスが最初からやり直されます。

私の問題は、複数の画像がページに読み込まれ、一部には合計 3 つの gif アニメーションがあり、一部には 2 つ、一部には 1 つあるということです。

だから私がやろうとしているのは、次のものをロードする前に .gif が存在するかどうかを確認することです。

これは私の表記の一部を抜粋したものです...

$('#postContainer img').click(function () {            
    imgSrc = $(this).attr('src');    
    if(imgSrc.indexOf('_B.png') != -1){
        imgSrcToUse = imgSrc.replace('_B.png', '_pt1.gif');
        $(this).attr('src', imgSrcToUse);
        return false;
    }

上記のコードは、画像がクリックされると実行されます。画像 src を見つけて、静的 png を最初のアニメーション gif に置き換えます。すべての画像にはアニメーション GIF が含まれているため、これは問題ではありません。

if (imgSrc.indexOf('_pt1.gif') != -1) {
    var POS2 = imgSrc.replace('_pt1.gif', '_pt2.gif');
    $.ajax({
        url: POS2,
        type: 'HEAD',
        error: function() {
            alert('error');
            imgSrcToUse = imgSrc.replace('_pt1.gif', '_pt1.gif');
        },
        success: function() {
            alert('success');
            imgSrcToUse = imgSrc.replace('_pt1.gif', '_pt2.gif');
        }
    });        

    $(this).attr('src', imgSrcToUse);
    return false;
}

がロードされた後_pt1、次にクリックしたときにこの関数が実行されます。が存在するかどうかを確認し、_pt2存在する場合は、pt1 を pt2 と交換することになっています。ただし、2回目のクリックでのみ機能しているようです。一度クリックすると、_pt1再度読み込まれ、2 回目には_pt2正しく読み込まれます。これが私の最大の問題点です...

これが複雑な場合は申し訳ありませんが、ここで本当に困惑しています。皆さんがあまりにも混乱している場合は、物事を解決するために最善を尽くします.

4

1 に答える 1

1

これがあなたの問題です：

   $.ajax({
        url:POS2,
        type:'HEAD',
        error: function()
        {
            alert('error');
            imgSrcToUse = imgSrc.replace('_pt1.gif','_pt1.gif');
        },
        success: function()
        {
            alert('success');
            imgSrcToUse = imgSrc.replace('_pt1.gif','_pt2.gif');
        }
    });     

    $(this).attr('src',imgSrcToUse);

コードの最後の行はimgSrcToUse、AJAX クエリの結果がまだ含まれていない variable を使用しようとしています。AJAXは非同期であるため$.ajax、成功 (またはエラー) コールバックが呼び出される前に、呼び出しが返されて次の行に移動します。コールバックからのデータを使用してコードをコールバックに移動することで、これを解決できます。

var $that = $(this);
$.ajax({
    url: POS2,
    type: 'HEAD',
    error: function () {
        alert('error');
        var imgSrcToUse = imgSrc.replace('_pt1.gif', '_pt1.gif');

        $that.attr('src', imgSrcToUse);
    },
    success: function () {
        alert('success');
        var imgSrcToUse = imgSrc.replace('_pt1.gif', '_pt2.gif');

        $that.attr('src', imgSrcToUse);
    }
});

次のイメージ名をグローバル変数に割り当てていたため、2 回目の呼び出しで成功していました。varこれを回避するために使用する必要があります。

于 2013-01-18T17:47:24.600 に答える