為我的博客園做一個多彩tag

在一些網站上看到多彩tag，覺得很好看，就像着給自己的博客做一個，做之前是這樣的

單一且枯燥，先來看看這里的結構代碼

於是，為了做出多彩字，我在博客的自定義js里添加了這樣的代碼

$(".catListTag a").each(function(index,element){
    //color
    var color = "";
    for(var i = 0;i<3;i++){
        var d = Math.floor(Math.random() * 255);
        var h = Number(d).toString(16);
        if(h.length<2){
            h = "0" + h;
        }
        color += h;
    }
    color = "#" + color;
    //console.log(color);
    $(this).css("color",color);
    //size
    var s = Math.floor(Math.random()*5+12);
    var size = s + "px";
    $(this).css("font-size",size);
});

很不幸，沒有成功，經過調試發現，選擇器$(".catListTag a")根本沒有查找到元素，這是怎么回事呢?通過翻看博客園的部分源代碼找到了原因

沒錯，就像你看到的這樣，這一塊節點是在ajax請求完成之后通過js動態添加上去的，而我的自定義js代碼，絕對要在ajax請求完成之前就執行完了，當然就查找不到任何匹配的元素，怎么辦呢？

這個問題困擾了我很久，博客園的代碼我是不可能改的，不然在后面稍微加點代碼就OK了，可事實是不能改。最后，得高人指點（QQ群里的不好留名），想到可以覆寫回調方法，但這里回調方法是匿名方法，所以不能直接覆寫回調方法，只有間接的覆寫loadBlogSideBlocks方法，於是我講原來的loadBlogSideBlocks的代碼拷貝出來寫在自定義的js里，方法結束前加上自己的代碼，終於成功了

function loadBlogSideBlocks() {
    var n = [];
    document.getElementById("RecentCommentsBlock") && n.push("ShowRecentComment");
    document.getElementById("TopViewPostsBlock") && n.push("ShowTopViewPosts");
    document.getElementById("TopFeedbackPostsBlock") && n.push("ShowTopFeedbackPosts");
    document.getElementById("TopDiggPostsBlock") && n.push("ShowTopDiggPosts");
    $.ajax({url: "/mvc/Blog/GetBlogSideBlocks.aspx",data: {blogApp: currentBlogApp,showFlag: n.join(",")},type: "get",dataType: "json",success: function(n) {
            n && (n.RecentComments ? $("#RecentCommentsBlock").html(n.RecentComments) : $("#recent_comments_wrap").hide(), n.TopViewPosts ? $("#TopViewPostsBlock").html(n.TopViewPosts) : $("#topview_posts_wrap").hide(), n.TopFeedbackPosts ? $("#TopFeedbackPostsBlock").html(n.TopFeedbackPosts) : $("#topfeedback_posts_wrap").hide(), n.TopDiggPosts ? $("#TopDiggPostsBlock").html(n.TopDiggPosts) : $("#topdigg_posts_wrap").hide())
        }})
        
        //my code
        
        $(".catListTag a").each(function(index,element){
            //color
            var color = "";
            for(var i = 0;i<3;i++){
                var d = Math.floor(Math.random() * 255);
                var h = Number(d).toString(16);
                if(h.length<2){
                    h = "0" + h;
                }
                color += h;
            }
            color = "#" + color;
            //console.log(color);
            $(this).css("color",color);
            //size
            var s = Math.floor(Math.random()*5+12);
            var size = s + "px";
            $(this).css("font-size",size);
        });
}

最后效果