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

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

个人我会使用类似下面的东西。它避免了大量的事件被单独投射，并且足够满足您的需求。你所做的只是添加一个“clickEventClasss”类（或者任何需要你喜欢的东西）给每个应该有一个事件的元素添加一个id，以便你可以识别每个元素。

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