Jquery 单击照片并在列表中显示相应的项目

我正在为我的大学数学系写一个新网站。我在写关于教授信息的页面时遇到了一个问题。我设计了一个带有他们照片的表格，我的想法是当用户点击他/她的照片时，向用户显示一个包含该教授更多详细信息的框。以下是信息div在html中的外观：

div和prof的所有信息框

所以我试图在表中获取照片的索引，并向其中添加1，以便它和列表中相应信息框的索引和所有教授匹配。显然，变量itemIndex在第n个子方法中未被识别为参数

另一个想法是使用for循环：

$("#proftable td").click(function() {
    for ( var i = 0; i < 22; i++ ) {
        if ( i == $(this).index() ) {
            $("#kartenliste .visitenkarte:nth-child(i + 1)").show(); 
        };
    };
});

$（“#proftable td”）。单击（函数（）{
对于（变量i=0；i<22；i++）{
if（i=$（this.index（））{
$（“#kartenliste.visitenkart:nth child（i+1）”）.show（）；
};
};
});

我们系有22位教授，因此我的最终价值是。然而，这也不起作用

有人有更好的主意吗？我会非常感激的

---

提前谢谢你

你可以使用

$（“#kartenliste.visitenkart”）.eq（itemIndex）.show（）

你可以使用

$（“#kartenliste.visitenkart”）.eq（itemIndex）.show（）

我认为最好的解决方案是在你的td中添加一个自己的属性，然后用相同的id显示这个div

<td own-attr="visprof1">Prof John</td>

<div id = "kartenliste">

<div class="w3-card-4 visitenkarte hidden" id="visprof1">
    *info about the first professor*
</div>

</div>

---

我认为最好的解决方案是在td中添加一个自己的attr，然后用相同的id显示这个div

<td own-attr="visprof1">Prof John</td>

<div id = "kartenliste">

<div class="w3-card-4 visitenkarte hidden" id="visprof1">
    *info about the first professor*
</div>

</div>

---

$（“#kartenliste.visitenkart:n子项（“+itemIndex+”））.show（）；/？我也在想，是否在引号符号之间无法识别变量。。。我试过了，但还是没有结果。谢谢你的回复！又是我：）实际上你是对的：索引值需要添加到引号之外。我更仔细地阅读了index（）的文档，最终了解了它的工作原理。下面是一段代码：

var itemIndex=$（“td”）.index（this）
$（“#kartenliste.visitenkart:n子项（“+itemIndex+1+”））.show（）很高兴它被解决了。谢谢你的更新$（“#kartenliste.visitenkart:n子项（“+itemIndex+”））.show（）；/？我也在想，是否在引号符号之间无法识别变量。。。我试过了，但还是没有结果。谢谢你的回复！又是我：）实际上你是对的：索引值需要添加到引号之外。我更仔细地阅读了index（）的文档，最终了解了它的工作原理。下面是一段代码：
var itemIndex=$（“td”）.index（this）
$（“#kartenliste.visitenkart:n子项（“+itemIndex+1+”））.show（）很高兴它被解决了。谢谢你的更新！谢谢，你的主意也行。我只需要记住，第n个孩子从1开始，情商从0:）@TeodorChiaburu我正在为一些宝贵的声望点进行投票：-我还不能投票，我刚刚订阅了这个网站。我也需要一些观点，以便能够通过投票给出反馈：-）谢谢你，你的想法也行得通。我只需要记住，第n个孩子从1开始，情商从0:）@TeodorChiaburu我正在为一些宝贵的声望点进行投票：-我还不能投票，我刚刚订阅了这个网站。我也需要一些观点，以便能够通过投票给出反馈：-）谢谢！好主意，我知道你在那里做了什么。你的代码也能工作。现在我有三个选择：）谢谢！好主意，我知道你在那里做了什么。你的代码也能工作。现在我有三个选择：）
<td own-attr="visprof1">Prof John</td>

<div id = "kartenliste">

<div class="w3-card-4 visitenkarte hidden" id="visprof1">
    *info about the first professor*
</div>

</div>

$('td').click(function(){
   var showById=$(this).attr('own-attr');
   $('.visitenkarte#'+showById).show();
});