2

我是 jQuery 和 JavaScript 的新手,所以请多多包涵。我正在尝试执行 AJAX 获取请求以检索包含跟踪信息的 JSON 文件,其格式如下:

[
    {
        "name" : "Short Skirt, Long Jacket",
        "artist" : "Cake",
        "album" : "Comfort Eagle",
        "genre" : "Rock",
        "year" : 2001,
        "albumCoverURL" : "images/ComfortEagle.jpg",
        "bandWebsiteURL" : "http://www.cakemusic.com"
    },
    {
        ...
    }
]

我正在尝试使用这两个功能来做到这一点:

function loadJSON () 
{
    $.getJSON("lab4.json", updateHTML(result));
}

$(document).ready(function () 
{
    $("site").click(function () 
    {
        loadJSON();
    });
});

当用户单击 ID 为“站点”的链接时,我想发送一个异步 javascript 调用来检索我的 JSON 文件。成功后,它应该在这里调用我的 updateHTML 函数:

function updateHTML (result)
{
    var templateNode = document.getElementById("song-template").cloneNode(true);
    document.removeChild(getElementById("song-template"));

    $.each(result, function(i, song)
    {
        var songNode = templateNode.cloneNode(true);
    });
}

现在,这就是我卡住的地方:现在我有了这个克隆的节点,我如何使用 jQuery 在这里填写 HTML 中的所有字段:

<a id="site" href="#"><img id="coverart" src="noalbum.png" /></a>
<h1 id="title"></h1>
<h2 id="artist"></h2>
<h2 id="album"></h2>
<p id="date"></p>
<ul id="genres"></ul>

通常,我会这样:

$("site").attr("src","images/ComfortEagle.jpg");

但现在我面临两个问题。一,如何从我作为“歌曲”读入的 JSON 对象中获取新的 url,以及二,如何在我将其添加回文档的 html 之前克隆节点内的“站点”ID ? 谢谢!

4

2 回答 2

0

首先,如果您要使用 jquery,请使用 jquery。

您可以使用 ejquery clone() 方法而不是 js cloneNode 来完成此操作。

看这个小提琴

我认为这是您尝试使用更多 jquery ish 解决方案所做的事情。

var song = [1,2,3,4];

var templateNode = $("#lala");
$.each(song, function(key, val){
   var songNode = templateNode.clone(true);
    songNode.children('span.yo').text(val);
    $('#wrap').append(songNode);
});

对于 json 解析,在每次迭代中,您应该能够像访问任何其他 json 一样访问道具,因此在每个循环中,只需针对如下道具:

song.albumCoverURL
于 2013-10-10T19:35:08.413 回答
0

您可以连接密钥中的 ID

$.each(dataObj, function(key, val) {
    //dataObj is your returned JSON
    if ($("#" + key).length)
        $("#" + key).val(val);
});
于 2013-10-10T19:28:36.490 回答