Question

我有2个表，其中有一些行带有一些图像按钮。我想要做的是，当我点击图像按钮时，显示位于包含点击图像按钮的表格正下方的div。

<table id="Table1">
  <tr>
     <td><input type="image" src="Images/info.jpg" class="infoButton" /></td>
  </tr>
</table>
<div class="info">            
</div>

<table id="Table2">
  <tr>
     <td><input type="image" src="Images/info.jpg" class="infoButton" /></td>
  </tr>
</table>
<div class="info">            
</div>

到目前为止，我所做的是：

$('.infoButton').click(function () {                          
    $(this).closest('table').siblings().filter(":first").show();
});

当我单击第一个表格内的按钮时，此方法有效。然后它显示正确的div（表1下的那个）。当我点击表2中的按钮时，它再次显示相同的div。我希望它能在表2中显示div。

Answer 1

$('.infoButton').click(function () {                          
    $(this).closest('table').next('div').show();
});

<强> DEMO

Answer 2

建议使用jQuery parents函数，它增加了可读性并为此目的而构建。

$('.infoButton').click(function () { $(this).parents('table').next('div').show(); });

查找父表的第一个兄弟 - jquery

2 个答案: