1

jQueryを使用して、正しい画像がクリックされたかどうかを確認し、答えが正しかったかどうかに応じて画像を赤または緑に変更するコードがあります。その後、2 秒待ってページをリロードし、次の画像ペアを表示します。単体では問題なく動作するのですが、facebookアプリに入れるとうまく動作しません。

IE と Firefox では、クリックすると色が変わりますが、ページはリロードされません。ただし、クロムでは、クリックしても色が変わりません。それはiframeか何かの問題でしょうか？iframe 内で jQuery を使用する場合、特定のパラメーターが必要ですか?

私のコードからの抜粋は次のようになります。

jQuery(document).ready(function(){
   jQuery('img#0').live("click", function(){
        if (jQuery(this).hasClass("correct")){
            jQuery(this).attr('src', "0g.png");
        } else{
            jQuery(this).attr('src', "0r.png");
        }

    });
});

ご覧のとおり、$ を jQuery に変更して、他の可能性のあるライブラリとの競合を防ぎました。

これを機能させる方法はありますか？

4

3 に答える 3

3

Facebookページまたはアプリ内でjqueryを実行している場合は、HTML内のスクリプトファイルへのリンクを含め、httpsを使用する必要があります。

于 2012-10-16T18:19:51.170 に答える
0

わかりました、これはこれまでで最もばかげたアイデアかもしれませんが、私にとってはうまくいきました。Facebookではなく、Webページを見ながら、JQueryはChromeのWebページに正常にロードされました。fb アプリの chrome にロードすると、失敗しました。

IEはうまくいきました。https:// ではなく http:// にリンクしていることがわかりました (すべてが安全でなければならないことを忘れないでください)。https:// に変更したらうまくいきました。

于 2012-07-03T03:46:47.427 に答える
0

の ID を持つ画像は0、HTML4 および XHTML の無効な HTML 要素 ID です。HTML5 で有効です。これは、DOCTYPE宣言の問題である可能性があります。

DOCTYPE を変更しても問題が解決しない場合は、画像クリック イベントに委任できます。

// html
<div id="someElement">
   <img class="correct" />
</div>

// jquery
$("div#someElement").delegate("img", "click", function() {
   var correct = $(this).hasClass("correct");
   $(this).attr('src', (correct ? "0g.png" : "0r.png" ) );
});

jQuery.delegate().live()は、現在および将来の要素に適用されるという点で関数に似ています。違いは、delegate() がイベント ハンドラーを親要素 ( someElement) に適用し、子からのバブリング イベントを監視することです。 live()ドキュメントの上部でこれらのバブリング イベントを監視し、パフォーマンスが低下する可能性があります。ドキュメンテーション ページに詳細情報があり、2 つの違いに関する SO に関する多くの議論がここにあります。

ID 属性仕様への関連リンクは次のとおりです。

html5 仕様
html4 仕様
xhtml ガイドライン
HTML の id 属性の有効な値は何ですか?

于 2012-06-13T14:17:08.720 に答える