0

次のコードを含むjQueryファイルがあります。

    ;(function($) {

    $.fn.randomImage = function(options) {
        return this.each(function() {
            var defaults = {images: [
                '<a href="page1.html">Asia<br><img src="https://lh6.googleusercontent.com/-CMBwAQFvgmc/ULwxL0ciUfI/AAAAAAAAAA8/RhaVA3N_TKM/s720/Asia.JPG" height=125 width=200></a>',
                '<a href="page2.html">Africa<br><img src="https://lh6.googleusercontent.com/-LZx9rZ_N7ZQ/ULwyGe1sOPI/AAAAAAAAABE/8iQpB5O7yys/s720/Africa.jpg" height=125 width=200></a>',
                '<a href="page3.html">America<br><img src="https://lh4.googleusercontent.com/-22FSGLZPiMU/ULwy2XZWWHI/AAAAAAAAABM/JgxWMAtQiuM/s800/Central America.JPG" height=125 width=200></a>']};
            var settings = $.extend(defaults, options || {});
            $(this).html(settings.images[Math.floor(Math.random() * settings.images.length)]);
        });
    };
})(jQuery);

HTMLファイルに次の行を導入しました。

<script type="text/javascript" src="RandomPictures.js"></script>

そして、Jqueryを呼び出すためのHTMLファイルがあります。私はそれをdivの内部に呼びたいです。

どのように電話すればいいですか？

私は試した：

 <div id="header"><script>
$(function() {
      $('div').randomImage();
});</script></div>

しかし、これは私のHTMLコードのすべての要素を非表示にし、画像のみを表示します。

私も試しました：

 <div id="header"><script>
$(function() {
      $('header').randomImage();
});</script></div>

しかし、ランダムな画像は表示されません。

何かアドバイス？

4

1 に答える 1

0

#コードの 2 番目のブロックでは、ID をターゲットにするためにセレクターにが必要です。

$('#header').randomImage();

コードの最初のブロックについては、あなたが何を期待していたのかわかりません。コードの書き方では、すべてのdivタグを見つけてinnerHTML、すべてのdivをランダムな画像に設定します (これにより、ページのコンテンツが消去される可能性があります)。それがコードが書かれていることです。おそらく、ページ内のすべての div ではなく、ランダムな画像が必要な特定の div のみをターゲットにする必要があります。

さらに、次で始まる randomImage の定義:

$.fn.randomImage = ...

ドキュメントの準備が整うまで待つ必要はありません。使用する前に定義コードが実行されていないと、問題が発生する可能性さえあります。jQuery がロードされた後にのみ適用する必要があります。これは、スクリプトのロード順序で実行できます。

于 2012-12-18T04:10:20.217 に答える