作者s25g5d4 (死城盜賊)
看板Ajax
標題[ajax] 用AJAX取得XML在寫入網頁
時間Thu Aug 5 23:52:49 2010
這是成果發表會~
用jQuery寫的 特別PO上來給版友們吐嘈XDD
不過找不到空間放怎麼辦
最後只好丟HINET ADSL送的空間了
http://s25g5d4.sg1010.myweb.hinet.net/index.html
script部分
$(document).ready(function () {
$.ajax({
url: 'xml/3.xml?='+Math.floor(Math.random()*1000),
dataType: 'xml',
success: function (data) {
$(data).find("album").each(function(i){
var img=$(this).find("image"),content='';
content+='<div class="album"><table><tr><td><img
src="'+img.text()+'"'+(img.attr('width')?'
width="'+img.attr('width')+'"':'')+(img.attr('height')?'
height="'+img.attr('height')+'"':'')+' /></td><td
class="intro"><h2>'+$(this).find("name").text()+'</h2><h3>'+$(this).find("artist").text()+'</h3><ol
class="track">';
$(this).find("track").each(function (index) {
content+='<li>'+$(this).text()+'</li>';
});
_data=$('#data').append(content+"</ol><span
class='desc'>"+$(this).find("desc").text()+"</span></td></tr></table></div>");
});
divAlbum=$('div.album').hover(function(){
$(this).animate({"opacity":1},300);
},function(){
$(this).animate({"opacity":0.8},300);
});
_data.animate({"opacity":1},800);
olTrack=$('ol.track');
divAlbum=$('div.album');
func=function(){
divHighlight=$(this).removeClass('album').addClass('highlight');
$('div.album').hide(500);
divHighlight.find('span.desc').hide(500,function(){
$(this).appendTo(_data).show(500).attr('id','spanDesc');
});
olTrack.show(500);
$('div.highlight img').one('click',function(){
$('div.album').show(500,function(){
$('
#spanDesc').hide(0,function(){
$(this).appendTo('div.highlight
td.intro').removeAttr('id').show(500);
divHighlight.removeClass('highlight').addClass('album');
divAlbum.one('click',func);
});
olTrack.hide(500);
});
});
}
divAlbum.one('click',func);
}
});
});
--
1F：→ Entropy1988:就不要下次插了插頭結果忘了按開關07/30 11:27
2F：推 ArSaBuLu: 就不要下次開了開關結果忘了放東西07/30 11:30
3F：→ peter261989:就不要下次記得放東西結果忘了拿出來07/30 11:34
4F：→ fine246: 就不要下次拿出東西結果擺在那忘了吃07/30 11:47
5F：推 Entropy1988:就不要下次記得吃飯結果忘了煮下一餐 07/30 11:50
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 59.127.208.70
6F：→ s25g5d4:其實本來是架在自己電腦的...可是我又不能24小時開機@@ 08/05 23:53
7F：→ TonyQ:有用到多次的 div.album / #data這些查詢應該用變數cache 08/06 00:00
8F：→ TonyQ:找不到空間可以用fiddle 08/06 00:00
9F：→ TonyQ:總之 $ 有點過度使用了，適當用變數減少查詢會比較好。 08/06 00:01
※ 編輯: s25g5d4 來自: 59.127.208.70 (08/06 21:47)
※ s25g5d4:轉錄至看板 Web_Design 08/06 23:18
10F：推 IDL:這又沒很難 08/06 23:35
11F：→ s25g5d4:對我來說算難爆了 08/07 00:20
12F：→ s25g5d4:我接觸jQuery才一兩個月 而且這還是我第一次用AJAX= = 08/07 00:21
13F：推 liullen:對於初學者很有幫助的! 08/09 02:20
14F：推 bala045:挺酷的 09/07 00:46