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在第n个子方法中不被识别为参数。

另一个想法是使用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();
});

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

2 个答案: