jQuery: показать метаданные, относящиеся к файлу при щелчке по конкретному имени файла (показать/скрыть, этот объект)

Question

У меня есть следующий HTML-код, который является единственным результатом, который содержит имя файла и некоторые метаданные о файле. Я хочу скрыть таблицу, которая сначала имеет класс «detail-pane» (я знаю, как это сделать), и я хочу отобразить панель (класса «панель детали»), которая относится к имени файла (например, H001_abcde_martin_chop.gits) при нажатии на имя файла. Что мне нужно сделать, чтобы связать две вещи друг с другом, чтобы я мог писать jQuery, который понимает, какой объект класса «filename» связан с каким объектом класса «панель детали» и делает соответствующее отображение и скрытие :

Я знаю, что я прошу многого, но это поможет решить множество проблем для меня.

Код:

<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() для дополнительного эффекта.