减少javascript重复

我有一个选项卡式菜单系统，点击tab将一个特定页面加载到相关的选项卡div中

目前我有以下一系列功能。每个选项卡都有一个集合，这会产生一些非常难看的代码。我能做些什么来简化和减少重复

每个“选项卡”实例都是已单击选项卡的名称。{%url…%}部分是Django动态url

我在想，如果将选项卡名称和url放入一个排序数组中，那么至少可以使所有函数都能被集体创建。但还有进一步简化的余地吗

谢谢你的帮助

    function loadTABlog() {
        $("#TABlog").load("{% url list_TABlog person.id %}", function(response, status, xhr) {
            if (status == "error") {
                var msg = "Sorry but there was an error: ";
                $("#TABlog").html(msg + xhr.status + " " + xhr.statusText);
            }
        });
        return false;
    };
    $("#loadTABlog").click(function() {
        $("#TABlog").empty().html('<img src="{{ STATIC_URL }}loading.gif" class="ajaxloader" />');
        loadTABlog();
    });

函数loadTABlog（）{
$（“#TABlog”）.load（“{%url list_TABlog person.id%}”），函数（响应、状态、xhr）{
如果（状态=“错误”）{
var msg=“抱歉，出现错误：”；
$（“#TABlog”）.html（msg+xhr.status+“”+xhr.statusText）；
}
});
返回false；
};
$（“#LoadTableLog”）。单击（函数（）{
$（“#TABlog”）.empty（）.html（“”）；
loadTABlog（）；
});

我会尝试让它成为数据驱动的。类似于

var tabs = [
    {activator: "#loadTabLog",
     element: "#tabLog",
     url: "{% url list_tab_log 9000 %}"},
    ...
];

并遍历它，分配处理程序：

for (var i = 0; i < tabs.length; ++i) {
    var t = tabs[i];
    $(t.activator).click(function() {
        $(t.element).empty().html("<img>");
        ...
        $(t.element).load(t.url.replace("9000", actual_user_id), ...);
    });
}

for（变量i=0；i

Hi ayanami。这是一个有趣的想法。我试图实现你的建议，但它似乎只让其中一个选项卡工作——最后一个。如果我删除“最后一个选项卡激活器”部分，它就会工作，但新的最后一个选项卡除外。如果我在for循环中为t.url添加了一个警报，那么无论单击哪个选项卡，它都会显示相同的url。@user973347没有看到代码，或者最好是jsfiddle，我根本帮不了你。$.each（tabs，function（）{console.log（this.activator+“”+this.element）；$（this.element）.empty（）.html（“”）；$（this.element）.load（this.url，函数（响应，状态，xhr）{if（状态==“错误”）{var msg=“抱歉，出现错误：；$（$（this.attr（'href'））.html（msg+xhr.status+”+xhr.statusText）；}返回false；}）；}）；这将修复它。我现在了解到，由于它是一种后期绑定语言，循环中的“I”仅存在于循环的末尾供使用。因此它始终是最后一个选项卡。再次感谢您的帮助ayanami。