jQuery：當單擊某個文件名時顯示與文件相關的元數據（顯示/隱藏，該對象）

Question

我有以下HTML，它是包含文件名和一些關於該文件的元數據的單個結果。我想隱藏最初有類「detail-pane」的表格（我知道如何做到這一點），我想顯示與文件名相關的面板（類「detail-pane」）（例如H001_abcde_martin_chop.gits）當文件名被點擊時。我需要做些什麼來獲得彼此相關的兩件事情，以便我可以編寫jQuery來理解類「文件名」的哪個對象與類「detail-pane」的哪個對象相關，並執行相關的顯示和隱藏：

我知道我要求很多，但這會幫助我解決很多問題。

代碼：

<td><span class="normal"><div class="filename">H001_abcde_luther_chop.fits</div></span> 
     <table id="detail1" border="0" cellspacing="0" cellpadding="6" class="detail-pane"> 
      <tr> 
      <td><span class="normal">CTYPE1 = 'RA---SIN'&nbsp;</span></td> 
      </tr> 
      <tr> 
      <td><span class="normal">CRVAL1 = 0.000000000000E+00</span></td> 
      </tr> 
      <tr> 
      <td><span class="normal">CTYPE2 = &quot;DEC--SIN'</span></td> 
      </tr> 
      <tr> 
      <td><span class="normal">CRVAL2 = -9.000000000000E+01</span></td> 
      </tr> 
     </table></td> 

Answer 1

如果格式總是這樣，你可以穿越過來，像這樣：

$(".filename").click(function() { 
    $(this).closest("td").find(".detail-pane").show(); 
}); 

這是常見的jQuery來找到自己的一貫立場相關的對象關於元素。在這種情況下，我們要去第一個父母<td>，然後在其中找到並顯示class="detail-pane"。你也可以做.fadeIn()而不是.show()以獲得額外的效果。