【发布时间】：2011-06-14 14:16:07
【问题描述】：
我正在尝试从 last.fm API 附加一些 JSON 数据，
我已经在几个阶段使用 alert() 来验证 API 是否被正确解析，
这让我得出结论 getElementById().appendChild() 不起作用，下面是我设置的测试页面的 URL：
http://mutant-tractor.com/tabtest.html
所以我被建议从这个直接的 JS 转移到 JQuery 是最好的方法， 也就是说，我对任何 JQuery 都一无所知，而我的 JS 知识是基于我所做的一些基本 Java...
将其转换为工作 JQuery 有多简单/不简单？ 我会为此悬赏，但我不知道该怎么做。
function calculateDateAgo(secAgo) {
var agoString, agoRange, agoScaled;
if(secAgo >= (agoRange = 60*60*24))
agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"days":"day") + " ago";
else if(secAgo >= (agoRange = 60*60))
agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"hours":"hour") + " ago";
else if(secAgo >= (agoRange = 60))
agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"minutes":"minute") + " ago";
else if(secAgo >= -60)
agoString = "blastin' out now";
else
agoString = "soon ;)";
return agoString;
}
function truncateName(name, l) {
return name.length > l ? name.substr(0,l-2) + "\u2026" : name;
}
function lfmRecentTracks(JSONdata) {
try {
var eImg, eLink, eSpan, divTag, eWrapper;
var oTracks = new Array().concat(JSONdata.recenttracks.track);
for (var i = 0; i < oTracks.length; i++) {
//insert coverart image
var spanTag = document.createElement("span");
document.body.appendChild(spanTag);
spanTag.className = "lfmTrackImageCell tab_item";
if(oTracks[i].image[1]["#text"] != "") {
eImg = document.createElement("img");
spanTag.appendChild(eImg);
eImg.src = oTracks[i].image[1]["#text"];
eImg.className = "lfmTrackImage";
}else{
eImg = document.createElement("img");
spanTag.appendChild(eImg);
eImg.src = "http://cdn.last.fm/flatness/icons/res/3/track.png";
eImg.className = "lfmTrackImageNotFound";
}
}
for (var i = 0; i <>[lessthanhere] oTracks.length; i++) {
//insert track link
spanTag = document.createElement("span");
spanTag.className = "lfmTrackInfoCell tabslider";
eLink = document.createElement("a");
eLink.appendChild(document.createTextNode( truncateName(oTracks[i].name, 25) ));
//alert(truncateName(oTracks[i].name, 25));
spanTag.appendChild(eLink);
eLink.href = oTracks[i].url;
//alert(oTracks[i].url);
eLink.target = "new";
eLink.className = "lfmTrackTitle";
document.body.appendChild(spanTag);
//insert artist name
eSpan = document.createElement("span");
eSpan.appendChild(document.createTextNode(truncateName(oTracks[i].artist["#text"], 22) ));
//alert(truncateName(oTracks[i].artist["#text"], 22));
eSpan.className = "lfmTrackArtist";
document.body.appendChild(eSpan);
//insert date
eSpan = document.createElement("span");
spanTag.appendChild(eSpan);
eSpan.appendChild(document.createTextNode( (typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts)) ));
//alert((typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts)));
eSpan.className = "lfmTrackDate";
document.body.appendChild(eSpan);
}
} catch(e) {}
}
上述代码的唯一工作方式是使用 document.body.appendChild()
我尝试调用正文底部和内联的脚本以允许完全加载 DOM，但这些都不起作用。
我试图将它们附加到的 div 是 4 个不同的 div，即在 for 循环中，每个循环都需要引用不同的元素，
提前致谢！ 迈尔斯
编辑：
HTML 代码：
<link href='css/style.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" media="all" href="http://beta.mutant-tractor/wp-content/themes/toolbox/style.css" />
<link href='/css/tabbedContent.css' rel='stylesheet' type='text/css' />
<script src="/scripts/JQuery/tabbedContent.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/General/lastfmtest.js"></script>
</head>
<body>
<aside class="widget">
<h3>I'm listening to...</h3>
<div class="tabbed_content">
<div id="lfmArtRow" class="tabs">
<div class="moving_bg">
</div>
<script type="text/javascript" src="http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=mutant_tractor&api_key=6b85edc3841f3d0935d9dfed9c556634&limit=4&format=json&callback=lfmRecentTracks"></script>
</div>
</aside>
<div id="lfmRecentTracks" style='padding: 15px;'>
<div class="content">
<div class="tabbed_content">
<div class="slide_content">
<div class="tabslider">
<div class="sliding_info">Test 1
</div>
<div class="sliding_info">Test 2
</div>
<div class="sliding_info">Test 3
</div>
<div class="sliding_info">Test 4
</div>
</div>
<br style="clear: both" />
</div>
</div>
</div>
</div>
<div id="test">
</div>
</body>
【问题讨论】：
-
“我会悬赏……”你还没有yet earned that privilege。你至少需要 75 个。
-
查看相关的 HTML 标记会很有帮助。没有理由说“纯 JavaScript”不应该工作，将所有内容转换为 jQuery 的建议听起来是善意的，但值得怀疑，尤其是考虑到您声称完全不熟悉该框架。
-
虽然 JavaScript 可以让你侥幸逃脱，但始终以分号结束行。如果你想保持清醒，你必须比 JS 更严格。
-
无法解释的反对票太拖累了。
-
请注意，JavaScript 是与 Java 非常不同的野兽，尽管它的名称中包含 Java 并且语法表面上相似。名称的重叠只是 Netscape 和 Sun 的营销。
标签： javascript jquery json dom last.fm