Javascript Jquery-Onclick切换“this”行中行的第一个实例

我一直在想，如何制作一个在点击按钮时显示和隐藏注释字段的函数。唯一的问题是有多个行项目和多个注释框。我希望避免根据从mysql中提取的项目数量动态生成注释框的ID，如ID=box1、ID=box2等

以下是代码片段：

<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>

---

谢谢

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

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

---

那么您想切换包含注释文本区域的tr吗？如果是这样的话，我认为您需要一些父级/同级遍历

$('button').click(function(){
    hide(this);
});

function hide(x){
    $(x).parent().sibling('tr').toggle();
}

---

是的，我知道这一点，这就是为什么我写到我不想使用ID，而是想选择按钮的父表行的第一个实例。我可以使用类，但仍然存在如何选择与触发它的按钮位于同一父行中的div类的问题

$('button').click(function(){
    hide(this);
});

function hide(x){
    $(x).parent().sibling('tr').toggle();
}