javascript - Jquery - Onclick 切换 'this' 行内行的第一个实例

Question

我一直在思考如何制作一个在单击按钮时显示和隐藏评论字段的函数。唯一的问题是有多个行元素和多个评论框。我想避免为评论框动态生成 ID(如 id="box1"、id="box2"等基于从 mysql 中提取的元素数)。

下面是一段代码:

<tr>
    <td>1</td>
    <!-- Line Item # -->
    <td>Foundation</td>
    <!-- Name -->
    <td>1</td>
    <!-- QTY -->
    <td>$50</td>
    <!-- Price -->
    <td>$50</td>
    <!-- Line Total -->
    <td>
        <button class="btn btn-default" type="button" id="OpenImgUpload">Upload Packet</button>
        <br/>
        <button class="btn btn-default" type="button" id="addNotes">Add Notes</button>
        <input type="file" id="upload1" name="upload" multiple />
    </td>
    <td align="center">
        <button type="button" class="btn btn-md btn-primary" id="submitbutton">Submit Item</button>
    </td>
    <tr>
        <td colspan="7">
            <div class="col-sm-12 col-md-12" style="display:none;" id="notes">
                <textarea class="form-control" rows="5" id="comment"></textarea>
            </div>
        </td>
    </tr>
</tr>

现在假设这个代码段在一个页面上有多个实例(每个订单项一个实例，其中有很多)。我将如何使用 JQuery 来切换嵌套表行(其中包含包含行元素的父行的评论框？

这是我现在拥有的占位符函数:

function hide(){
            $('#notes').toggle();

        };

谢谢!

Answer 1

由于您的 HTML 代码是重复的，因此您需要使用类而不是 ID。 ID 是唯一的，每页只能有一个实例。话虽这么说，也许是这样的:

$('.addNotes').on('click', function(){
  $(this).parent('tr').find('.notes').toggle();
});