處理多個點擊事件的最佳方式

我想在應用程序中單擊鏈接時完成一些操作。處理多個點擊事件的最佳方式

例如，我正在創建一個在文檔中包含多個內部鏈接的手冊。目前，我會處理它們像這樣：

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

這被認爲是對說明書內容的表。所以會有很多本地鏈接。

來源

2012-07-08 Brendan

你能後的HTML的樣品你寫的嗎？ – Bojangles 2012-07-08 16:05:02

如果你打算讓內容發生變化，爲什麼不使用[jQuery UI Tabs]（http://jqueryui.com/demos/tabs/）？ – Mottie 2012-07-08 16:42:49

它在移動設備上，我不想要標籤？就那麼簡單。 – Brendan 2012-07-08 18:19:11

個人我會使用類似下面的東西。它避免了大量的事件被單獨投射，並且足夠滿足您的需求。你所做的只是添加一個「clickEventClasss」類（或者任何需要你喜歡的東西）給每個應該有一個事件的元素添加一個id，以便你可以識別每個元素。

function waitForClick() 
{ 

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

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

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

    });   

}

來源

2012-07-08 16:07:07 Ashley

您可以將點擊事件綁定到類而不是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 
});

來源

2012-07-08 16:09:43 bmorenate

偉大的思想一樣！ – Ashley 2012-07-08 16:10:25

確實。你擊敗了我。 – bmorenate 2012-07-08 16:13:08

您可以使用您將類型爲click事件的類。

在此之後，以下是可能的：

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

來源

2012-07-08 16:10:39 Pilatus

應該在開始條件之前將ID存儲在變量中，反覆使用$（this）（或任何元素）比抓取它並將其存儲在變量中要慢，因爲它不需要訪問DOM over並結束。 – Ashley 2012-07-08 16:12:10

使用'this.id'會更容易 – Mottie 2012-07-08 16:38:43

處理多個點擊事件的最佳方式

回答

相關問題