在JavaScript函数之间传递JSON值

Passing JSON values between JavaScript functions

本文关键字：JSON 之间 JavaScript 函数      更新时间：2024-01-28

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

我的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 上遇到的错误

未捕获引用错误：数据未定义

问题在于此代码：

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

处理程序在全局上下文中运行，因此没有在那里定义data。使用实际函数：

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

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

相关文章：