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个textboxe，而且我不想写20行jquery代码。我正在尝试像

这样的事情

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

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

我没有将所有这些放在一个表中的原因是切换动画看起来不太好。

感谢您的任何建议！

Answer 1

您希望使用table返回closest()，然后使用next()获取包含textarea的div。

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

Answer 2

这应该可以解决问题

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

jquery .find / .closest / .next

2 个答案: