0

私はjqueryの初心者なので、質問を許してください：これが私のhtmlです

<!DOCTYPE html>
<head>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src=teacher_index.js></script>
</head>
<body>

    <div id="lessons_viewer">
    </div>
</body>

これが私のjsです：

var data=[
{image:"reading_practice.png"},
{image:"drag_meaning.png"}
]

function populate_lessons_viewer(data){
    for (var i=0,count=data.length;i<count;i++){
        $('<img/>', {
        className: 'lesson_image',
        src: data[i].image
        }).appendTo('#lessons_viewer');
    };
};

$(document).ready(populate_lessons_viewer(data));

私は何が間違っているのですか？画像は追加されていません！

ps私はjsでそれを行う方法を知っていますが、jqueryを学ぼうとしています。

もう一度、私は私の新しい間違いと質問をお詫びしますが...私が移動したとき：

$(document).ready(populate_lessons_viewer(data));

htmlドキュメントへのステートメント...jsドキュメントの代わりに動作します。誰かが説明していただければ幸いです。

4

2 に答える 2

1

データ変数は既に宣言されています。try を渡して document.ready 関数に渡す必要はありません。

var data=[
  {image:"reading_practice.png"},
  {image:"drag_meaning.png"}
]

通常の document.ready 関数は次のようになります

$(document).ready(function() {code here ...});

あなたはやろうとしています

$(document).ready(function(data){code here ...});

すでに変数を宣言しているので、データ引数を取り除く必要があります

function populate_lessons_viewer(){
    for (var i=0,count=data.length;i<count;i++){
        $('<img/>', {
        className: 'lesson_image',
        src: data[i].image
        }).appendTo('#lessons_viewer');
    };
};

$(document).ready(populate_lessons_viewer);
于 2013-01-10T15:59:10.627 に答える
1

問題は $(document).ready() ステートメントにあります。関数に引数があるため、関数を評価し、それを ready() 関数に送信しています。関数全体をそれに送りたいとします。

$(document) を使用してこれを実現する 1 つの方法は、データが既にグローバル変数であるため、関数名を渡すことです。

function populate_lessons_viewer() {
    //...
};

$(document).ready(populate_lessons_viewer);

または、ほとんどの jQuery アプリケーションで推奨されているように、init() 関数を使用できます。C 言語を使用したことがある場合、これはコードを main() 関数に配置するのと似ています。ドキュメントがロードされた後に開始されます。

data = [
    {image: "foo.png"},
    {image: "bar.png"}
];

$(init);

function init() {
    //your code, such as:
    populate_lessons_viewer(data);
    //...other initial functions
}

function populate_lessons_viewer(data) {
    //....
}

更新:私が考えた別のオプションは、その関数を別の関数にカプセル化することです:

$(document).ready(function() {
    populate_lessons_viewer(data)
});

私はこれをテストしましたが、うまくいきます。残りのコードを変更する必要はありません。

于 2013-01-10T16:22:36.473 に答える