如何用jQuery实现单评论编辑控制：仅保留一个textarea编辑框

原代码无法正确将其他评论的编辑状态还原为普通文本展示，且存在选择器逻辑错误、重复ID等问题，以下是修正后的实现：

保持原HTML结构不变 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex py-2 comments" data-id="1">
 <div class="flex-shrink-0">
  <img  src="https://via.placeholder.com/50" alt="..."/>
 </div>
  <div class="ms-3">
    <div class="fw-bold">Name-1
     <button type="submit" class="update-comment" data-id="1">Edit</button>
  </div>
    <span class="comment-text" data-text="Comment Example - 1" data-id="1">Comment Example - 1</span>
  </div>
</div>
<hr>
<div class="d-flex py-2 comments" data-id="2">
 <div class="flex-shrink-0">
  <img src="https://via.placeholder.com/100" alt="..."/>
 </div>
  <div class="ms-3">
    <div class="fw-bold">Name-2
    <button type="submit" class="update-comment" data-id="2">Edit</button>
  </div>
    <span class="comment-text" data-text="Comment Example - 2" data-id="2">Comment Example - 2</span>
  </div>
</div>
<hr>

修正后的JavaScript代码 #

$(document).on('click','.update-comment',function(e){
    // 先重置所有评论：将编辑状态还原为span，移除active类
    $('.comments').each(function() {
        const $comment = $(this);
        const $textarea = $comment.find('textarea.update-comment-text');
        if ($textarea.length > 0) {
            const text = $textarea.val();
            const dataId = $comment.data('id');
            // 替换回带数据属性的span
            $textarea.replaceWith(`<span class="comment-text" data-text="${text}" data-id="${dataId}">${text}</span>`);
        }
        $comment.find('.ms-3').removeClass('active');
    });

    // 处理当前点击的评论
    const $currentComment = $(this).closest('.comments');
    const $ms3 = $currentComment.find('.ms-3');
    const $commentText = $currentComment.find('.comment-text');
    const text = $commentText.attr('data-text');
    const dataId = $commentText.data('id');

    // 标记当前评论为激活状态，替换为编辑框
    $ms3.addClass('active');
    $commentText.replaceWith(`<textarea class="update-comment-text">${text}</textarea>`);
});

关键修复点说明 #

• 全局重置其他评论：遍历所有评论容器，将已处于编辑状态的textarea还原为带原始数据属性的span，确保其他评论回到普通展示状态。
• 避免重复ID冲突：将原代码中固定的id="updateComment"改为类选择器update-comment-text，解决多个评论生成重复ID的DOM问题。
• 精准定位当前评论：通过closest('.comments')锁定点击按钮所属的评论容器，只修改当前评论的状态，避免误操作其他评论。
• 保留核心数据属性：还原span时保留data-text和data-id，保证后续编辑能正确获取评论内容和标识。

内容的提问来源于stack exchange，提问作者JFeel