javascript - 我可以把它变成一个javascript函数吗？

Question

$("#tab1").click(function(){
        loadTab(1);
        $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected');
        $(this).addClass('selected');
    });

是否可以将上面的代码变成一个函数，我可以像这样调用它

tab(TAB NUMBER HERE);  

并让它添加/删除正确的样式/div？

脚本的全部代码如下

<script type="text/javascript">
// array of pages to load
var pageUrl = new Array();          
pageUrl[1] = "page1.php";
pageUrl[2] = "somepage2.php";
pageUrl[3] = "lastpage3.php";

// function to load page into DIV
function loadTab(id) {
    if (pageUrl[id].length > 0) {
        $("#loading").show();
        $.ajax({
            url: pageUrl[id],
            cache: false,
            success: function (message) {
                $("#tabcontent").empty().append(message);
                $("#loading").hide();
            }
        });
    }
}

$(document).ready(function(){
    $("#loading").hide();
    $("#tab1").click(function(){
        loadTab(1);
        $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected');
        $(this).addClass('selected');
    });

    $("#tab2").click(function(){
        loadTab(2);
        $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected');
        $(this).addClass('selected');
    });

    $("#tab3").click(function(){
        loadTab(3);
        $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected');
        $(this).addClass('selected');
    });
    });

    alert(window.location.hash);
</script>

Answer 1

我建议创建一个闭包来生成您的“选项卡点击功能”。这样调用事件时的 this 参数仍然是 DOM 对象。

// this function creates an event function for a specified tab number.
function makeTabClick(tabNumber) {

  // this function is the actual event handler
  return function(e) {
    loadTab(tabNumber);
    $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected');
    $(this).addClass('selected');
  };
}

$('#tab1').click(makeTabClick(1));    
$('#tab2').click(makeTabClick(2));    
$('#tab3').click(makeTabClick(3));

另一种选择，更“jQuery”的方式 - 创建一个插件函数，它将生成您想要的点击处理程序。

$.fn.makeTab = function(tabNumber) {
  return this.click(function(e) {
    loadTab(tabNumber);
    $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected');
    $(this).addClass('selected');
  });
}

$('#tab1').makeTab(1);
$('#tab2').makeTab(2);
$('#tab3').makeTab(3);