3

写真、映画、PDFドキュメントを含む「アイコン」をユーザーが(前のボタンと次のボタンで)めくることができるjQueryギャラリーを作成しようとしています。

私の戦略は次のとおりです。

  • アイコンの実際の内容をjQueryに認識させないでください。
  • 実際のコンテンツは、HTML文字列を返すAjaxコールバックから取得されます。
  • 私のphpコードがそのように決定した場合、前のボタンや次のボタンがそのHTML文字列に存在する可能性があります。
  • それらのボタンが存在する場合は、クリックイベントをそれらにバインドします。
  • クリックイベントは、新しいアイコンを表示するmainLoop()を再帰的に呼び出します。

コードは次のとおりです。

function mainLoop() {
if (icons[newIndex] !== IFM_APPENDED ) { // tests whether this icon has already been loaded
    $.ajax({
        type: 'POST',
        url: '/callback/div_supply',
        data: {iconindex: newIndex},
        success: function(data) {
            $('#jquery-lightbox').append(data); // inserts new icon into the DOM
            icons[newIndex] = IFM_APPENDED; // registers that this icon has been loaded
            if ($('#icon'+newIndex+' .prev-button').length !== 0) { // test if the previous button is present
                $('#icon'+newIndex+' .prev-button').click(function () {
                oldIndex = newIndex;
                newIndex -= 1;
                mainLoop();
                }); // END $('#icon'+newIndex+' .prev-button').click()
            } // END if ($('#icon'+newIndex+' .prev-button').length !== 0) 
            if ($('#icon'+newIndex+' .next-button').length !== 0) { // test if the previous button is present
                $('#icon'+newIndex+' .next-button').click(function () {
                oldIndex = newIndex;
                newIndex += 1;
                mainLoop();
                }); // END $('#icon'+newIndex+' .prev-button').click()
            } // END if ($('#icon'+newIndex+' .prev-button').length !== 0) 
        } // END succes:
    }); // END $.ajax
} //  END if (icons[newIndex] !== IFM_APPENDED )
$('#icon'+oldIndex).hide(); // hide the old icon
$('#icon'+newIndex).show(); // hide the new icon
}

$(document).ready(function() {
// Hide some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
$('embed, object, select').css({ 'visibility' : 'hidden' });
$("#gallery li").click(function() {
    _set_interface();
    mainLoop();
}); // END  $("#gallery a").click(function
}); // END $(document).ready(function()

このコードは、FirebugデバッガーでmainLoop()をステップ実行すると正常に機能します。

ただし、実行すると、スクリプトがハングします。また、$(document).ready(function()をステップスルーすると、ハングすることになります。Firebugをスローする可能性のあるconsole.log()呼び出しはありません。

再帰の設定方法に問題があるのではないかと思います。

何が問題になっていますか?

4

1 に答える 1

0

OK、私は(ある種の)何が起こっているのかを発見しました。

この問題は、callback-HTMLでdisplay:noneを明示的に指定したことが原因で発生しました。これを行うと、.hide()メソッドはそれをdisplay:blockに変換できません。

Firebugを使用した場合にこれが機能することを考慮すると、プロットは厚くなります。ただし、Firefoxでコードを直接実行すると失敗します。

何が実際に私を襲ったのかまだわかりません...

編集

この問題は、Dreamhostサポートに連絡した後に解消されました。ですから、私の側には何も問題はなかったと思いますが、サーバーのいくつかの設定はうまくいきませんでした。しかし、私は実際の問題が何であるかを知りませんでした。

于 2012-06-22T09:19:14.850 に答える