javascript - jquery .find/.closest/.next

Question

我有一个表格，其中一行有 4 个单元格，如下所示

<table class="Header3" style="width: 100%;">
    <tr>
        <td id="RC" class="contLabel" style="width: 228px">
            <div class="abc">Related Companies</div>
        </td>
        <td style="width: 101px">
            <asp:checkbox runat="server" id="RCR" type="checkbox" ENABLED="false"/>
        </td>
        <td style="width: 116px">
            <asp:checkbox runat="server" id="RCP" type="checkbox" ENABLED="false"/>
        </td>
        <td id="RC2" class="contLabel">Are related companies used to improve results?</td>
    </tr>

在表格下方，我在 div 内有一个文本框，代码如下:

<div id="RCN" class="panel2" style="width: 100%;">
    <div class="ContentTB">
        <asp:TextBox  id="RCNT" runat="server" TextMode="MultiLine" width="99.5%" Enabled="false"></asp:TextBox>
    </div>
</div>

我想要实现的是，当我单击第一个单元格(#RC)或第四个单元格(#RC2)时，表格下方的文本框就会切换，目前我的 jquery 代码是

$(function() {
    $('#RC,#RC2').click(function(e) {
        $('#RCN').toggle('fast');
    });
})

并且工作正常。

现在的问题是我有 20 个表和 20 个文本框，并且我不想编写 20 行 jquery 代码。 我正在尝试类似的事情

$('.contLabel').click(function(e) {
    $(this).next('.panel2').toggle('fast');
});

但是它不起作用。我想知道正确的代码是什么？

我没有将它们全部放在一张表中的原因是切换动画看起来不太好。

感谢您的建议!

Answer 1

您想要使用 closest() 返回到 table，然后使用 next() 获取带有其中的文本区域。

$('.contLabel').on('click', function (e) {
  var $td = $(this);
  $td.closest('table').next('.panel2').toggle('fast');
});