Как мне взять идентичные функции javascript и превратить их в функцию многократного использования?

Question

Мне просто нужно заменить эти 18 функций одной функцией, которая делает то же самое.Я попробовал несколько вещей, но не смог сделать это со всеми петлями внутри.Я покажу вам 2 из 18, чтобы продемонстрировать различия.Каждому TD назначен определенный класс, поэтому он добавляет HTML в нужное место.Любая помощь будет отличной.

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

Не могли бы вы просто изменить свою функцию на это и начать передавать класс:

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

Вы дали нам немного взглянуть на эти две функции, но, похоже, единственное отличие. Если я что-то пропустил, пожалуйста, дайте мне знать.

Answer 2

Вы можете добавить URL-адрес в качестве пользовательского атрибута в div tacoBoxMagic, затем потерять суффикс для className и сделать все сразу:

$(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);
            }
        });
    });
});

Ваш HTML будет выглядеть примерно так:

<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>