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

[s25g5d4 (死城盜賊)]

這是成果發表會~

用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);
        }
    });
});

--
→ Entropy1988:就不要下次插了插頭結果忘了按開關
推 ArSaBuLu:   就不要下次開了開關結果忘了放東西
→ peter261989:就不要下次記得放東西結果忘了拿出來
→ fine246:    就不要下次拿出東西結果擺在那忘了吃
推 Entropy1988:就不要下次記得吃飯結果忘了煮下一餐
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 59.127.208.70
→ s25g5d4:其實本來是架在自己電腦的...可是我又不能24小時開機@@
→ TonyQ:有用到多次的 div.album / #data這些查詢應該用變數cache
→ TonyQ:找不到空間可以用fiddle
→ TonyQ:總之 $ 有點過度使用了，適當用變數減少查詢會比較好。
※ 編輯: s25g5d4         來自: 59.127.208.70        (08/06 21:47)
※ s25g5d4:轉錄至看板 Web_Design                                   08/06 23:18
推 IDL:這又沒很難
→ s25g5d4:對我來說算難爆了
→ s25g5d4:我接觸jQuery才一兩個月 而且這還是我第一次用AJAX= =
推 liullen:對於初學者很有幫助的!
推 bala045:挺酷的