如何用JavaScript实现div移动、显示隐藏及按钮切换位置

需求说明 #

• 点击answer-btn按钮时，将answer-form移动到对应评论块的目标位置（原<!--move here section-->区域）
• 若answer-form已在当前评论块显示，再次点击同一按钮则隐藏该表单
• 点击其他评论块的answer-btn时，将answer-form从当前位置移除，移动到新评论块的目标位置并显示

当前代码 #

JavaScript 代码 #

function showHideAsnwerForm() {
  var answerForm = document.getElementById("answer-form");

  // Check if the element has the "my-class" class
  if (answerForm.classList.contains("d-none")) {
    var nearestComment = answerForm.closest("#comment");

    nearestComment.appendChild(answerForm);
    answerForm.classList.remove("d-none");
  } else {
    answerForm.classList.add("d-none");
  }
}

HTML 代码 #

<div id="answer-form" class="border border-secondary  text-right  m-2 d-none " style="background-color:gainsboro;">
  <p class="p-2">لطفا پاسخ خود را بنویسید</p>

  <form asp-action="CreateComment" asp-controller="CategoryItem" class="was-validated w-100  p-2 " method="post">
    <input type="hidden" id="BookFK" value="" name="BookFK" required>

    <div class="form-group">
      <textarea class="form-control " aria-label="With textarea" rows="5" id="Text" name="Text" required></textarea>
      <div class="valid-feedback">تایید شد</div>
      <div class="invalid-feedback">لطفا این بخش را پر کنید.</div>
    </div>

    <div class="form-group mt-1 d-inline-block w-100 ">
      <button type="submit" class="btn btn-success float-end"> ثبت پاسخ   </button>
      <button class="btn btn-danger float-start"> لغو   </button>
    </div>
  </form>
</div>

<div class="  border-dark border-2 border-end mt-1 mb-1 me-2" id="comment">
  <div>
    <img id="imgMain" src="https://via.placeholder.com/50" class=" img-thumbnail rounded-circle rounded-3" style="width:50px;height:50px;">
    <b>نام کاربری</b> تاریخ: 1345/23/2
  </div>

  <div class="pe-1">
    پاسخ 8
  </div>

  <div class="d-flex justify-content-end">
    <button onclick="showHideAsnwerForm()" id="aswer-btn" type="button" class="btn btn-outline-secondary mb-2">#answer-btn</button>
  </div>

  <!--move here section-->
</div>

解决方案 #

1. 调整HTML结构 #

• 给评论块替换为类选择器（避免ID重复，支持多评论块）
• 给每个评论块的目标位置添加容器，替代注释作为定位标记
• 按钮点击时传递自身元素，方便关联对应评论块

修改后的HTML（多评论块示例）：

<div id="answer-form" class="border border-secondary text-right m-2 d-none" style="background-color:gainsboro;">
  <p class="p-2">لطفا پاسخ خود را بنویسید</p>

  <form asp-action="CreateComment" asp-controller="CategoryItem" class="was-validated w-100 p-2" method="post">
    <input type="hidden" id="BookFK" value="" name="BookFK" required>

    <div class="form-group">
      <textarea class="form-control" aria-label="With textarea" rows="5" id="Text" name="Text" required></textarea>
      <div class="valid-feedback">تایید شد</div>
      <div class="invalid-feedback">لطفا این بخش را پر کنید.</div>
    </div>

    <div class="form-group mt-1 d-inline-block w-100">
      <button type="submit" class="btn btn-success float-end"> ثبت پاسخ </button>
      <button class="btn btn-danger float-start"> لغو </button>
    </div>
  </form>
</div>

<!-- 评论块1 -->
<div class="border-dark border-2 border-end mt-1 mb-1 me-2 comment-block">
  <div>
    <img src="https://via.placeholder.com/50" class="img-thumbnail rounded-circle rounded-3" style="width:50px;height:50px;">
    <b>نام کاربری</b> تاریخ: 1345/23/2
  </div>

  <div class="pe-1">
    پاسخ 8
  </div>

  <div class="d-flex justify-content-end">
    <button onclick="showHideAnswerForm(this)" type="button" class="btn btn-outline-secondary mb-2 answer-btn">#answer-btn</button>
  </div>

  <!-- 目标位置容器 -->
  <div class="answer-target"></div>
</div>

<!-- 评论块2 -->
<div class="border-dark border-2 border-end mt-1 mb-1 me-2 comment-block">
  <div>
    <img src="https://via.placeholder.com/50" class="img-thumbnail rounded-circle rounded-3" style="width:50px;height:50px;">
    <b>نام کاربری 2</b> تاریخ: 1403/10/15
  </div>

  <div class="pe-1">
    پاسخ 9
  </div>

  <div class="d-flex justify-content-end">
    <button onclick="showHideAnswerForm(this)" type="button" class="btn btn-outline-secondary mb-2 answer-btn">#answer-btn</button>
  </div>

  <div class="answer-target"></div>
</div>

2. 修改JavaScript逻辑 #

更新函数，实现三种场景的判断与处理：

function showHideAnswerForm(btn) {
  const answerForm = document.getElementById("answer-form");
  // 定位当前按钮所属的评论块
  const currentCommentBlock = btn.closest('.comment-block');
  // 定位当前评论块的目标容器
  const targetContainer = currentCommentBlock.querySelector('.answer-target');
  
  // 判断表单是否已在当前评论块中
  const isInCurrentBlock = targetContainer.contains(answerForm);

  if (answerForm.classList.contains('d-none')) {
    // 表单隐藏状态：移动到目标容器并显示
    targetContainer.appendChild(answerForm);
    answerForm.classList.remove('d-none');
  } else if (isInCurrentBlock) {
    // 表单已在当前块显示：隐藏表单
    answerForm.classList.add('d-none');
  } else {
    // 表单在其他评论块：移动到当前目标容器并保持显示
    targetContainer.appendChild(answerForm);
  }
}

关键改动说明 #

• 用.comment-block类替代#commentID，支持多个评论块共存
• 新增.answer-target容器，精准定位表单的目标位置
• 通过按钮传递this，快速关联对应评论块
• 新增状态判断逻辑，覆盖三种需求场景

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