我正在尝试从last.fm API附加一些JSON数据,我已经在几个阶段使用alert()来验证API是否被正确解析,结果是正确的。这让我得出结论getElementById().appendChild()不起作用,下面是我设置的测试页面的URL:http://mutant-tractor.com/tabtest.html。因此,从这里直接使用JS转移到JQuery被认为是最好的方法,也就是说,我对任何JQuery都没有头绪,我的JS知识基于我所做的一些基本Java...将其转换为有效的JQuery有多简单/复杂?我会为此付出赏金,但我不知道该怎么做。
以上代码能够起作用的唯一方式是使用document.body.appendChild()。
我尝试在body的底部和内联处调用脚本,以便允许DOM完全加载,但这些方法都没有奏效。
我想要附加它们的div是4个不同的div,即在for循环中每次迭代都需要引用不同的元素。
提前感谢您的帮助! Myles
编辑:
HTML代码:
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()。
我尝试在body的底部和内联处调用脚本,以便允许DOM完全加载,但这些方法都没有奏效。
我想要附加它们的div是4个不同的div,即在for循环中每次迭代都需要引用不同的元素。
提前感谢您的帮助! Myles
编辑:
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>