Javascript 处理多个单击事件的最佳方法

当在应用程序中单击链接时，我正在尝试完成一些操作

例如，我正在创建一个在文档中具有多个内部链接的手册。目前，我会像这样处理他们：

function waitForClick()
{
    $('#about').click(function()
    {
        $('#container').slideDown();
    });

    $('#using').click(function()
    {
          changeContent...
    });

    <!-- etc, etc -->            

}

函数waitForClick（）
{
$（'#about'）。单击（函数（）
{
$（“#容器”）.slideDown（）；
});
$（'#using'）。单击（函数（）
{
更改内容。。。
});
}

有没有更好的方法来处理多个单击事件，这样我就不需要为每个项目都设置一个事件。我确信必须有一种方法来委派单击的项目

HTML:

---

这应该是手册的目录。因此将会有很多本地链接。

我个人会使用下面的链接。它避免了大量的事件被单独播放，并且具有足够的可扩展性，可以满足您的需要。您所要做的就是向每个元素添加一类“clickEventClasss”（或您喜欢的任何内容），这些元素应该有一个事件，并添加一个id，以便您能够识别每个元素

function waitForClick()
{

    $('.clickEventClass').click(function() {

        var id = $(this).attr('id');

        switch(id) {
            case 'about':
            //Logic
            break;
        case 'using':
            //Logic
            break;
        }

    });         

}

---

您可以将单击事件绑定到类而不是ID

<a class="navigationLink" href="home.com">Home</a>
<a class="navigationLink" href="about.com">About</a>
<a class="navigationLink" href="contactus.com">Contact Us</a>

$(".navigationLink").click(function() {
    //Do something cool
});

$（“.navigationLink”）。单击（函数（）{
//做点酷的事
});

您可以使用一个类，将单击事件分配给该类

在此之后，可以执行以下操作：

$(".class").click(function()
{
    if($(this).attr("id") == "about")
    {
        //code here
    }
    else if($(this).attr("id") == "using")
    {
        //code here
    }
}

---

你能发布一个你写的HTML的例子吗？如果你想让内容发生变化，为什么不直接使用它呢？它在移动设备上，我不想要标签？就这么简单。在启动条件之前，应该将ID存储在变量中，反复使用$（this）（或任何元素）要比一次性获取ID并将其存储在变量中慢，因为它不需要反复访问DOM。只使用

this.ID

$(".class").click(function()
{
    if($(this).attr("id") == "about")
    {
        //code here
    }
    else if($(this).attr("id") == "using")
    {
        //code here
    }
}