jQuery根本不工作

我想用jQuery文件填充我的HTML，並使用getJSON調用加載JSON文件。不幸的是，我的jQuery似乎沒有任何工作。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文件，在子目錄稱爲資源：

[ 
    { 
     "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上的點擊監聽器根本不起作用。我也嘗試使用coverart，並沒有骰子。 2.當我顯式調用loadJSON（）;我在調試器中瀏覽updateHTML時，我的克隆或刪除都沒有做任何事情，而我的.each只是被忽略。如果有人能指出我在做什麼錯誤，將不勝感激。我是新來的所有這jQuery和JavaScript的東西，並不真正知道我在做什麼。

來源

2013-10-15 Logan Shire

1日的事情1：你需要設置你的點擊監聽器，一個'$（「文件」）準備」語句，如果你還沒有做到這一點。 –

可能在這裏使用JS模板是有意義的。或者underscore.js或Handlebars模板 –

問題出在您的loadJSON()方法中。 getJSON不會返回調用的結果。試試這個

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

另外你應該在DOM準備好的時候綁定事件。

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

來源

2013-10-15 17:29:20 HungryCoder

這有助於 - 現在單擊圖像執行該功能，它會刪除該節點，但我的.each仍然不會執行任何操作。任何想法？ –

在'updateHTML'方法內加入'debugger;'並打開控制檯並嘗試點擊按鈕。然後檢查'result'變量包含的內容。注意：您正在克隆這些元素，並將它們注入以創建重複的ID。如果你能創建一個jsfiddle會更容易讓我們解決這個錯誤。 – HungryCoder

我不知道如何將我的json文件添加到jsfiddle。結果在調試器中顯示爲空。 –

你必須把你的點擊監聽doc ready處理：

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

來源

2013-10-15 17:29:39 Jai

jQuery根本不工作

回答

相關問題