[ajax] update! 用AJAX取得XML在寫入網頁

看板Ajax作者s25g5d4 (死城盜賊)時間15年前 (2010/08/05 23:52)推噓3(3推 0噓 6→)

留言9則, 5人參與討論串1/1

這是成果發表會~ 用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); } }); }); --