0

我正在尝试使用我通过 getJSON 调用加载的 JSON 文件中的 jQuery 填充我的 HTML。不幸的是，我的 jQuery 似乎都没有工作。

这是我的 HTML：

<!doctype html>
<html>
  <head>
     <title>Lab 4</title>
     <script type="text/javascript" src="resources/jquery-1.4.3.min.js"></script>
     <script src="lab4.js"></script>
  </head>
  <body>
    <div id="song-template">
      <a id="site" href="#"><img id="coverart" src="images/noalbum.png"/></a>
      <h1 id="title"></h1>
      <h2 id="artist"></h2>
      <h2 id="album"></h2>
      <p id="date"></p>
      <p id="genre"></p>
    </div>
  </body>
</html>

我的一些 JSON 文件，位于名为 resources 的子目录中：

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

还有我的 JavaScript：

function updateHTML(result) 
{
    var templateNode = $("#song-template").clone(true);
    $("#song-template").remove();

    $.each(result, function(key, song)
    {
        var songNode = templateNode.clone(true);
        songNode.children("#site").href(song.bandWebsiteURL);
        songNode.children("#coverart").src(song.albumCoverURL);
        songNode.children("#title").text(song.name);
        songNode.children("#artist").text(song.artist);
        songNode.children("#album").text(song.album);
        songNode.children("#date").text(song.year);
        songNode.children("#genre").text(song.genre);
        $("body").append(songNode);
    });
}

function loadJSON() 
{
    var result = $.getJSON("resources/lab4.json");
    updateHTML(result)
}

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

到目前为止的问题是： 1. 我在站点 id 上的点击监听器根本不起作用。我也尝试过使用封面，没有骰子。2.当我显式调用loadJSON()时；我在调试器中遍历 updateHTML，我的克隆或删除都没有做任何事情，我的 .each 只是被忽略了。如果有人能指出我做错了什么，将不胜感激。我对所有这些 jquery 和 javascript 东西都很陌生，我真的不知道我在做什么。

4

2 回答 2

5

问题出在你的loadJSON()方法上。getJSON 不返回调用结果。尝试这个

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

此外，您应该在准备好 DOM 时绑定事件。

$(document).ready(function(){
$("#site").click(function() 
{
    loadJSON();
});
}})
于 2013-10-15T17:29:20.140 回答
2

You have to put your click listener in doc ready handler:

$(function(){
    $("#site").click(function(){
       loadJSON();
    });
});
于 2013-10-15T17:29:39.690 回答