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

Question

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

div 包含有关教授的所有信息框

<div id = "kartenliste">

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

</div>

这是我在 jQuery 中尝试过的：

$("#proftable td").click(function() {
    var itemIndex = $("#profdiv").index(this) + 1;      
    $("#kartenliste .visitenkarte:nth-child(itemIndex)").show();
});

所以我试图获取表格中照片的索引并将其添加 1，以便它与列表中相应信息框的索引与所有教授相匹配。显然变量 itemIndex 在 nth-child 方法中没有被识别为参数。

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

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

我们系有 22 位教授，因此 i 的最终值。但是，这也不起作用...

有人有更好的主意吗？我真的很感激。

提前谢谢你！

Answer 1

你可以使用$("#kartenliste .visitenkarte").eq(itemIndex).show()

Answer 2

我认为最好的解决方案是在你的 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>

然后在jQ中

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