带有多个切换触发器的表需要由一个 jQuery 控制

Question

我有一个我正在 ASP.NET 中处理的表，其中每个主行都有 2 个隐藏行，这些行用于在文本框中添加 cmets 或使用第二个隐藏行中的列表框来填充文本框做了cmets。将有未知数量的行，因为它基于我们数据库中每个客户端的数据。在主行的最后一列中有一个图像，它是单击触发器，用于显示隐藏在其后面的行。由于某种原因，我正在使用的 click evt 无法正常工作。任何帮助都会很棒。

注意：我还使用 for 循环来计算我的点击事件发生的位置，当表格完成时，for 循环将从后面的代码中的计数器运行，因此“

HTML：

  <table id="mfCriteriaTable">
                <tr class="whiteBack mfTableBorder">
                    <td class="mfRightCol showCell" width="140px" align="left">Category</td>
                    <td class="colOne" width="600px" align="left">Criteria for achieving this element of service quality is listed here. Additional Detail click info</td>
                    <td width="50px" align="center"><asp:RadioButton ID="mfScoreRad1" runat="server" /></td>
                    <td width="50px" align="center"><asp:CheckBox ID="mfNA1" runat="server" /></td>
                    <td width="50px" align="center"><asp:CheckBox ID="mfND1" runat="server" /></td> 
                    <td width="75px" align="center"><a href="#" id="mfComments1"><img src="Images/blue_info_tag.png" alt="" /></a></td>
                </tr>
                <tr class="whiteBack" id="commentRow1" style="display:none;"><td colspan="6" id="tdComment1" height="30px"><asp:TextBox ID="txtComments1" CssClass="mfTextComments" runat="server" TextMode="MultiLine"></asp:TextBox></td></tr>
                <tr class="whiteBack" id="slTableComments1" style="display:none;">
                     <td colspan="6" height="30px">
                        <asp:ListBox ID="lbComments1" runat="server" Height="20px" ToolTip="Please select a comment from this list or create your own in the text area above.">
                            <asp:ListItem Value="Comment 1">This is where comment number one will be, this is a longer comment just to see how it will all fit together.</asp:ListItem>
                            <asp:ListItem Value="Comment 2">This is a 2nd comment that is a bit shorter but shows usability. </asp:ListItem>
                            <asp:ListItem Value="Comment 3">And this is a 3rd comment so you are almost done.</asp:ListItem>
                        </asp:ListBox>
                    </td> 
                </tr>
                <tr class="whiteBack mfTableBorder">
                    <td class="mfRightCol showCell" width="140px" align="left">Category</td>
                    <td class="colOne" width="600px" align="left">Criteria for achieving this element of service quality is listed here. Additional Detail click info</td>
                    <td width="50px" align="center"><asp:RadioButton ID="mfScoreRad2" runat="server" /></td>
                    <td width="50px" align="center"><asp:CheckBox ID="mfNA2" runat="server" /></td>
                    <td width="50px" align="center"><asp:CheckBox ID="mfND2" runat="server" /></td> 
                    <td width="75px" align="center"><a href="#" id="mfComments2"><img src="Images/blue_info_tag.png" alt="" /></a></td>
                </tr>
                <tr class="whiteBack" id="commentRow2" style="display:none;"><td colspan="6" id="tdComment2" height="30px"><asp:TextBox ID="txtComments2" CssClass="mfTextComments" runat="server" TextMode="MultiLine"></asp:TextBox></td></tr>
                <tr class="whiteBack" id="slTableComments2" style="display:none;">
                     <td colspan="6" height="30px">
                        <asp:ListBox ID="lbComments2" runat="server" Height="20px" ToolTip="Please select a comment from this list or create your own in the text area above.">
                            <asp:ListItem Value="Comment 1">This is where comment number one will be, this is a longer comment just to see how it will all fit together.</asp:ListItem>
                            <asp:ListItem Value="Comment 2">This is a 2nd comment that is a bit shorter but shows usability. </asp:ListItem>
                            <asp:ListItem Value="Comment 3">And this is a 3rd comment so you are almost done.</asp:ListItem>
                        </asp:ListBox>
                    </td> 
                </tr>
            </table>

Javascript：

     function assignClickHandlerFor(num) {

            window.console && console.log('#mfComments' + num);
            $('#mfComments' + num).click(function (evt) {
                evt.preventDefault();
                evt.stopPropagation();

                var $aBox = $(evt.currentTarget); 

                $aBox.find('tr#commentRow' + num).toggle;
                $aBox.find('tr#slTableComments' + num).toggle;
            });
    }

    var i;

    for (i = 1; i <= 7; i++) {
        assignClickHandlerFor(i);
    }

Answer 1

为了使选择更容易，请将所有可点击的图片提供class="mfComments"，然后：

$(function() {
    $('.mfComments').click(function (evt) {
        evt.preventDefault();
        evt.stopPropagation();
        $(this).closest("tr").next("tr").next("tr").andSelf().toggle();
    });
});

我不确定循环计数器业务。我不明白它应该达到什么目的。