JQuery：顯示關於包含在列表中的唯一元素的信息

Question

我剛開始使用jQuery，並且遇到了一些其他語言可以輕鬆完成的操作。

我有一個元素列表，每個元素包含一個信息列表。 我的問題來自於我無法使用jQuery來關於這些元素的slideDown或slideUp信息，因爲我無法獲得每個元素的唯一標識符。

$(function() 
{ 
    classe = "#afficheDetails" + 0; 
    $(classe).click(function() 
    { 
     affiche = "#detailsFeuille" + 0; 
     if($(affiche).css("display") == "block") 
     { 
      $(affiche).slideUp(); 
     } 
     else 
     { 
      $(affiche).slideDown(); 
     } 
    }); 
}); 

更新：

而且，我在一個for循環，所以我並不總是相同數量的元素，以顯示...

<p id='afficheDetails<?php echo $i;?>'>to display info, click here</p> 

      <table id='detailsFeuille<?php echo $i;?>'> 
       <tr> 
        ... 
       </tr> 

       <tr> 
        ... 
       </tr> 
</table> 

這種事情是實際上工作，但你可以看到我沒有動態添加指令，這都是手動的。我的elem列表可以包含很多元素。

我試圖創建一個非匿名函數，但每次我調用它時，都會出現一個錯誤：myFunction未定義。

你能幫我嗎？

Thx！

Answer 1

通過指數

// Select all elements that start with "afficheDetails" 
$("[id^='afficheDetails']").click(function(){ 
    var index = $("[class^='afficheDetails'").index(this); // Index of the element 
    $("[id^='detailsFeuille']").eq(index).slideToggle(); 
}); 

檢查這個演示：http://jsfiddle.net/fRyjV/1/

通過ID

$("[id^='afficheDetails']").click(function(){ 
    // Replace the first part of the ID with nothing to get the integer. 
    var id = this.id.replace("afficheDetails", ""); 
    $("#detailsFeuille" + id).slideToggle(); 
}); 

檢查這個演示http://jsfiddle.net/fRyjV/