如何将javascript相同的函数带入可重用的函数中？

Question

I just need to replace these 18 functions with one functions that does the same thing. I've tried several things but an unable to do it with all the loops inside. I've show you 2 of the 18 to demonstrate the differences. Each td has a specific class assigned to it so it appends the html to the right spot. Any help would be great.

HEAD

<script type="text/javascript">
    function getLikesFTB(thisURL) {
        // The IDs to the fan pages to like
        var likeURLs = [thisURL];

        // The base of the URL we will build to query the API  
        var reqURL = "http://graph.facebook.com/?ids=";

        // Construct the rest of reqURL using our fan pages  
        for (var i = 0; i < likeURLs.length; i++) {
            reqURL += likeURLs[i];
            if (i != (likeURLs.length - 1)) {
                reqURL += ',';
            } else {
                reqURL += "&callback=?"
            }
        };


        $.getJSON(reqURL, function (data) {
            for (var i = 0; i < likeURLs.length; i++) {
                $('<div/>', {
                    class: "likes" + likeURLs[i],
                    html: "<div class='tacoBoxText'>" + data[likeURLs[i]].likes.toLocaleString() + " people like this.</div>"
                }).appendTo('.tacoBoxMagicFTB');
            }
        });
        $.getJSON(reqURL, function (data) {
            for (var i = 0; i < likeURLs.length; i++) {
                $('<div/>', {
                    class: "name" + likeURLs[i],
                    html: "<div class='tacoBoxTitle'>" + data[likeURLs[i]].name.toLocaleString()
                }).appendTo('.tacoBoxMagicFTB');
            }
        });
    }
</script>
<script type="text/javascript">
    function getLikesCareers(thisURL) {
        // The IDs to the fan pages to like
        var likeURLs = [thisURL];

        // The base of the URL we will build to query the API  
        var reqURL = "http://graph.facebook.com/?ids=";

        // Construct the rest of reqURL using our fan pages  
        for (var i = 0; i < likeURLs.length; i++) {
            reqURL += likeURLs[i];
            if (i != (likeURLs.length - 1)) {
                reqURL += ',';
            } else {
                reqURL += "&callback=?"
            }
        };


        $.getJSON(reqURL, function (data) {
            for (var i = 0; i < likeURLs.length; i++) {
                $('<div/>', {
                    class: "likes" + likeURLs[i],
                    html: "<div class='tacoBoxText'>" + data[likeURLs[i]].likes.toLocaleString() + " people like this.</div>"
                }).appendTo('.tacoBoxMagicCareers');
            }
        });
        $.getJSON(reqURL, function (data) {
            for (var i = 0; i < likeURLs.length; i++) {
                $('<div/>', {
                    class: "name" + likeURLs[i],
                    html: "<div class='tacoBoxTitle'>" + data[likeURLs[i]].name.toLocaleString()
                }).appendTo('.tacoBoxMagicCareers');
            }
        });
    }
</script>

CSS

.tacoBoxMagicFTB
{
    background-color: White;
    border:1px solid #b695cb;
    width:100%;
    position: relative;
    -moz-box-shadow: -1px -1px 3px #000000;
    -webkit-box-shadow: -1px -1px 3px #000000;
    box-shadow: -1px -1px 3px #000000; 
}

.tacoBoxMagicFTB img
{
    vertical-align: middle;
    padding-left: 10px;
}

HTML

    <table id="tacoBox" cellpadding="0" cellspacing="0" width="520" border="0">
        <tr>
            <td><img src="images/spacer.png" alt="" class="tacoTableColumnSpacer"/></td>
            <td class="tacoBoxMagicFTB" id="tacoFTB"><img src="images/spacer.png" alt="" height="55" width="1"/><img src="images/tb_feedthebeat.png" alt=""/><script type="text/javascript">getLikesFTB('113078108881');</script></td>
            <td><img src="images/spacer.png" alt="" class="tacoTableColumnSpacer"/></td>
        </tr>
        <tr>
            <td><img src="images/spacer.png" alt="" class="tacoTableColumnSpacer"/></td>
            <td class="tacoBoxMagicCareers"><img src="images/spacer.png" alt="" height="55" width="1"/><img src="images/tb_careers.png" alt="" /><script type="text/javascript">getLikesCareers('94517856739');</script></td>
            <td><img src="images/spacer.png" alt="" class="tacoTableColumnSpacer"/></td>
        </tr>

Answer 1

Could you just change your function to this and start passing the class:

 function getLikesFTB(thisURL, class) {
    // The IDs to the fan pages to like
    var likeURLs = [thisURL];

    // The base of the URL we will build to query the API  
    var reqURL = "http://graph.facebook.com/?ids=";

    // Construct the rest of reqURL using our fan pages  
    for (var i = 0; i < likeURLs.length; i++) {
        reqURL += likeURLs[i];
        if (i != (likeURLs.length - 1)) {
            reqURL += ',';
        } else {
            reqURL += "&callback=?"
        }
    };


    $.getJSON(reqURL, function (data) {
        for (var i = 0; i < likeURLs.length; i++) {
            $('<div/>', {
                class: "likes" + likeURLs[i],
                html: "<div class='tacoBoxText'>" + data[likeURLs[i]].likes.toLocaleString() + " people like this.</div>"
            }).appendTo(class);
        }
    });
    $.getJSON(reqURL, function (data) {
        for (var i = 0; i < likeURLs.length; i++) {
            $('<div/>', {
                class: "name" + likeURLs[i],
                html: "<div class='tacoBoxTitle'>" + data[likeURLs[i]].name.toLocaleString()
            }).appendTo(class);
        }
    });
}

You've given us quite a bit to look at for those two functions, but it looks like that is the only difference. If I missed something please let me know.

Answer 2

You could add the url as a custom attribute on the tacoBoxMagic divs, then lose the suffix on the className and do it all at once:

$(function()
{
    $(".tacoBoxMagic[url]").each(function()
    {
        var thisURL = this.getAttribute("url");
        // The IDs to the fan pages to like
        var likeURLs = [thisURL];
        // The base of the URL we will build to query the API  
        var reqURL = "http://graph.facebook.com/?ids=";
        // Construct the rest of reqURL using our fan pages  
        for (var i = 0; i < likeURLs.length; i++) {
            reqURL += likeURLs[i];
            if (i != (likeURLs.length - 1)) {
                reqURL += ',';
            } else {
                reqURL += "&callback=?"
            }
        };
        $.getJSON(reqURL, function (data)
        {
            for (var i = 0; i < likeURLs.length; i++)
            {
                $('<div/>', {
                    class: "likes" + likeURLs[i],
                    html: "<div class='tacoBoxText'>" + data[likeURLs[i]].likes.toLocaleString() + " people like this.</div>"
                }).appendTo(this);
                $('<div/>', {
                    class: "name" + likeURLs[i],
                    html: "<div class='tacoBoxTitle'>" + data[likeURLs[i]].name.toLocaleString()
                }).appendTo(this);
            }
        });
    });
});

Your HTML would look something like this:

<td class="tacoBoxMagic" url="113078108881" id="tacoFTB"><img src="images/spacer.png" alt="" height="55" width="1"/><img src="images/tb_feedthebeat.png" alt=""/></td>