Jquery-点击切换'这'一行

Jquery - Onclick toggle first instance of row within 'this' row

本文关键字：一行 Jquery-      更新时间：2023-09-26

我一直在思考如何制作一个函数，在单击按钮时显示和隐藏注释字段。唯一的问题是有多个行项目和多个评论框。我想避免为评论框动态生成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();
        };

谢谢！

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

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

所以您想切换包含#comment文本区域的tr？如果是这样的话，我认为您需要一些父/兄弟遍历。。。

$('button').click(function(){
    hide(this);
});
function hide(x){
    $(x).parent().sibling('tr').toggle();
}
相关文章：