Question

我是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 doc ...而不是js doc它的工作原理。如果有人能解释我会非常感激。

Answer 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);

Answer 2

你的问题在于$（document）.ready（）语句。由于函数中有一个参数，它正在评估函数并将其发送到ready（）函数。你想把整个功能发送到它。

使用$（document）实现此目的的一种方法是仅传递函数名称，因为数据已经是全局变量。

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) {
    //....
}

UPDATE：我刚想到的另一个选项是将该函数封装在另一个函数中：

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

我已对此进行了测试，但确实有效。您不必更改代码的其余部分。

简单的jquery appendTo

2 个答案: