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

您已经声明了数据变量.. 无需通过尝试并将其传递给您的 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) 完成此操作的一种方法是只传递函数名称，因为 data 已经是一个全局变量。

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 回答