0

我正在获取 JSon 数据，我正在使用 dom 来显示数据，我想嵌入一个指向显示的每个搜索结果的链接，当单击该链接时，将该数据实例传递到另一个块并显示该结果

我的 HTML 代码是

<html>
<body>
<div id:block 1 >
<div id:block 2>
<div id:block 3>
</body>

我的 Javascript 函数是

function addBooks(data) { // the data is a list of JSON objects


    var listdiv = document.createElement('li');
    listdiv.setAttribute('id', 'gBookListDiv');
    listdiv.innerHTML = ("Books Found:");
    parent.appendChild(listdiv);



    for(i = 0; i < data.length; i++) {


        //create each list item 
        var listItem = document.createElement('li');
        var link = document.createElement('a');
        listItem.setAttribute('id', 'gBookListItem');
        parent.appendChild(listItem);
        link.setAttribute('href', '#');
        link.setAttribute('onclick', 'displayBook(data[i])');

        listItem.appendChild(link);
    }
}

function displayBook(bookData) {
    alert(bookData.title);
    if(document.getElementById("block2").style.display == "block") {
        document.getElementById("block2").style.display = "none";
        document.getElementById("block3").style.display = "block";
    }
    var headerTitle = document.getElementById('book-profile-title-header');
    headerTitle.innerHTML = bookData.title;

    var title = document.getElementById('book-profile-pic');
    headerTitle.innerHTML = bookData.title;

}

出于某种原因，我无法将数据实例传递给 displayBook 函数。

这是我在 chrome 上遇到的错误

未捕获的 ReferenceError：未定义数据

4

1 回答 1

3

问题在于这段代码：

link.setAttribute('onclick', 'displayBook(data[i])');

处理程序在全局上下文中运行，因此data未在此处定义。请改用实数函数：

(function(i) {
    link.onclick = function() { displayBook(data[i]); }
})(i);

i围绕它的自执行函数需要在每次迭代中单独创建。

于 2012-07-24T23:16:56.567 回答