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

编辑以在答案中添加一些值(另请参阅其他答案,其中已经提到了以下内容中的一些,甚至全部):

• 你应该给标签一个公共标识符,比如css类:抽象是好的,mmkay？

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

• 标签可能有一个不太远的共同祖先.比如,他们都是(内部)<li>在一个<ul>中.探索并使用事件委托.

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

• 使用delegate1.4.2中添加的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;
      });
  });