jQuery：单击特定文件名时显示与文件相关的元数据（显示/隐藏，此对象）

发布于 2024-08-22 14:38:32 字数 1128 浏览 3 评论 0原文

我有以下 HTML，它是一个结果，其中包含文件名和有关该文件的一些元数据。我想隐藏最初具有“detail-pane”类的表格（我知道如何执行此操作），并且我想显示与文件名相关的面板（“detail-pane”类）（例如 H001_abcde_martin_chop.gits）当单击文件名时。我需要做什么才能使这两件事相互关联，以便我可以编写 jQuery 来了解“文件名”类的哪个对象与“详细窗格”类的哪个对象相关，并执行相关的显示和隐藏：

我知道我的要求很多，但这会帮助我解决很多问题。

代码：

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

原文

I have the following HTML which is a single result which contains a filename and some metadata about the file. I want to hide the table which has class "detail-pane" initially (I know how to do this) and I want to display the panel (of class "detail-pane") that relates to the filename (e.g. H001_abcde_martin_chop.gits) when the filename is clicked . What do I need to do to get the two things related to each other, so that I can write jQuery that understands which object of class "filename" is related to which object of class "detail-pane" and does the relevant showing and hiding:

I know I am asking for a lot, but this will help solve a lot of problems for me.

The code:

<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' </span></td>
          </tr>
          <tr>
            <td><span class="normal">CRVAL1 = 0.000000000000E+00</span></td>
          </tr>
          <tr>
            <td><span class="normal">CTYPE2 = "DEC--SIN'</span></td>
          </tr>
          <tr>
            <td><span class="normal">CRVAL2 = -9.000000000000E+01</span></td>
          </tr>
        </table></td>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情域 2024-08-29 14:38:32

如果格式总是这样，你可以像这样遍历：

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

在 jquery 中通过相对于元素的一致位置来查找相关对象是很常见的。在本例中，我们将转到第一个父级，然后在其中找到 class="detail-pane" 并显示。您也可以使用 .fadeIn() 而不是 .show() 来获得额外的效果。

If the format is always like this, you can just traverse over, like this:

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

It's common in jquery to find related objects by their consistent position in relation to the element. In this case we're going up to the first parent <td> then finding the class="detail-pane" in it and showing. You could do .fadeIn() instead of .show() for extra effect as well.

回复收藏 0 原文

~没有更多了~