jQuery:是否可以将多个事件分组到一个 .click() 中？

Question

我有以下代码，用于处理选项卡中的点击并通过 ajax 加载内容:

$(document).ready(function()
{
    $("#tab1").click(function()
    {
        loadTab($(this).attr("href") + "?ajax=1");
        return false; // cancel the event
    });

    $("#tab2").click(function()
    {
        loadTab($(this).attr("href") + "?ajax=1");
        return false; // cancel the event
    });

    $("#tab3").click(function()
    {
        loadTab($(this).attr("href") + "?ajax=1");
        return false; // cancel the event
    });

    $("#tab4").click(function()
    {
        loadTab($(this).attr("href") + "?ajax=1");
        return false; // cancel the event
    });
});

您会注意到有很多重复的代码。

有什么方法可以将#tab1、#tab2、...分组为单个 .click(function() 吗？

Answer 1

$(document).ready(function()
{
    $("#tab1, #tab2, #tab3, #tab4").click(function()
    {
        loadTab($(this).attr("href") + "?ajax=1");
        return false; // cancel the event
    });
});

编辑为答案添加一些值(value)(另请参阅其他答案，其中已经提到了以下部分内容，甚至可能是全部内容):

• 您应该为选项卡提供一个通用标识符，例如 CSS 类:抽象很好，嗯？

  $(document).ready(function()
  {
      $(".tab").click(function()
      {
          loadTab($(this).attr("href") + "?ajax=1");
          return false;
      });
  });
  

• 选项卡可能有一个共同的祖先，就在上面不远的地方。就像，它们都在一个

  内(内部)
  • 。探索这一点并使用事件委托(delegate)。

    $(document).ready(function()
    {
        $("#tabs").click(function(e)
        {
            if (!$(e.target).is('.tab')) return;
            loadTab($(this).attr("href") + "?ajax=1");
            return false;
        });
    });
    

  • 使用 1.4.2 中添加的 delegate API 来节省保护子句:

    $(document).ready(function()
    {
        $("#tabs").delegate('.tab', 'click', function()
        {
            loadTab($(this).attr("href") + "?ajax=1");
            return false;
        });
    });
    

  • 无需过度热衷于 jquery 应用程序:

    $(document).ready(function()
    {
        $("#tabs").delegate('.tab', 'click', function()
        {
            loadTab(this.href + "?ajax=1");
            return false;
        });
    });