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

标签可能有一个不太远的共同祖先。比如，它们都是（内部）＆lt; li＆gt;在一个＆lt; ul＆gt;中。探索并使用事件委托。

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

Answer 2

或者，给所有tab项目提供相同的CSS类，然后执行

$(".classname").click(...);

通过这种方式，即使添加新标签，您的代码仍然可以自动运行：）

Answer 3

我会建议以下替代方案：

live：给你的标签指定一个css类并选择：$（'。tabClass'）。live（'click'，function（）{// dosomethinguseful}）;
选择直播而不是点击的原因可能是可以动态制作额外的标签。 Live会自动为您处理此事。
利用jQueryUI tabs control。易于使用，并具有烧烤功能。

Answer 4

作为替代方案，您可以委派单击事件来执行不同的操作，具体取决于点击的目标（称为事件委派）

标记：

<div id="tabs">
    <a href="#1">Tab 1</a>
    <a href="#2">Tab 2</a>
    <a href="#3">Tab 3</a>
    <a href="#4">Tab 4</a>
</div>

JavaScript的：

$("#tabs").click(function(e)
{
    e.preventDefault();
    var target = $(e.target);
    if(target.is("a")) {
        alert(target.attr("href") + "?ajax=1");
    }
});

在jQuery中有一个名为.delegate()的快捷函数，有点多余的imo，但值得一试。

Answer 5

您可以通过逗号分隔在jQuery中使用multiple selectors，正如另一个答案已经指出的那样。但是，我想指出另一种共享代码的方法，虽然它并不真正适用于这种特殊情况，但它具有很好的知识。假设您有多个需要使用相同功能的事件。关于Javascript的一个很酷的事情是函数可以存储为变量然后重新使用......

var func = function(e) { 
  loadTab($(this).attr("href") + "?ajax=1");
  e.preventDefault(); // proper way to cancel the event
  return false; // cancel the event 
}

$("#tab1,#tab2,#tab3,#tab4").click(func);

就像我说的那样，在这种特殊情况下没有任何好处，但有时你需要为多个事件使用相同的功能。

Answer 6

如果你给所有选项卡一个类，说“.tabs”你可以这样做：

    $(".tabs").each(function(){

       $(this).bind('click', function(){

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

    });

不确定我是最优化的方式，但它应该有用。

jQuery：是否可以将多个事件组合成一个.click（）？

6 个答案: