Question

我正在尝试在我的应用程序中单击链接时完成某些操作。

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

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

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

    <!-- etc, etc -->            

}

是否有更好的方法来处理多个点击事件，因此我不需要每个项目都有一个事件。我确信必须有一种方法来委托点击哪个项目。

HTML：

<li><a id="about" href="#">About this Application</a></li>
<li><a id="using" href="#">Using this Manual</a></li>
<li><a id="pages" href="#">Pages:</a></li>

<!-- etc, etc -->

这应该是手册的目录。所以会有很多本地链接。

Answer 1

就个人而言，我会使用类似下面的内容。它避免了大量单独投射的事件，并且可以根据您的目的进行扩展。你所要做的就是在每个应该有一个事件添加id的元素中添加一个“clickEventClasss”（或任何你喜欢的东西），这样你就可以识别每个元素。

function waitForClick()
{

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

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

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

    });         

}

Answer 2

您可以将点击事件绑定到类而不是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
});

Answer 3

您可以使用将click事件分配给的类。

在此之后可能出现以下情况：

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

处理多个点击事件的最佳方式

3 个答案: