javascript - 通过纯 JS 将 HTML 表单从一个位置移动到另一个位置(并返回)

Question

我是一名服务器端开发人员(主要是 Pythong/Django)，但现在正在学习纯 Javascript。这些概念对我来说相对较新，因此需要帮助。

想象一个网络应用程序，用户可以在其中发布内容(文本或图像)。所有帖子都以长列表的形式显示在单个页面上。在每个帖子下，都有一个 reply 按钮。按下它会动态创建(通过 JS)一个用于回复所述帖子的表单字段。

还有一个附加要求。

再次按下相同的reply 按钮应该会使之前创建的表单消失。本质上，reply 按钮可以打开和关闭表单。

此外，如果页面中的任何其他帖子也有表单，那么它也应该消失。

我已经能够完成上述所有操作，但需要帮助以在表单“打开”后(在同一位置)切换关闭 表单。这是我的问题。

---

目前，在页面加载时，我将代码表单的代码放在 HTML 页面的顶部，在 div 中，display:none。

每当在帖子下按下reply 按钮时，我都会将此表单移动到同一个帖子下。如果此后按下完全不同的 reply 按钮，表单将再次移动到新位置。

就像我说的，我似乎无法做的一件事就是在重复按下同一个回复按钮时打开和关闭表单。

理想情况下，我不想改变我正在使用的策略(它对我来说效果很好)，但出于效率原因会改变它(对我来说是一大优势)。其次，我正在寻找纯 JS 解决方案。 JQuery 在我的雷达上，但我想先了解 JS，因此提出了这个要求。

---

我的 JS 代码目前是:

var formTemplate = document.querySelector('#form-template form');

function createInput(payload, id) {
    // populating input fields with correct values
    var input = document.createElement('input');
    input.setAttribute('id',id);
    input.setAttribute('type','hidden');
    input.setAttribute('value',payload);    
    return(input);
   }

function toggleReply(e) {
  if (!formTemplate) return;

  // prevent form submission
  e.preventDefault();

  // moving 'ghost form' into position
  e.target.parentNode.insertAdjacentElement('afterend', formTemplate);

  // getting pertinent values from "reply" button
  var payload = e.target.parentNode.querySelector('#payload').value;
  payload = payload.split(':');
  var tt = payload[5];
  var bid = payload[0];
  var idx = payload[3];

  // assigning populated input fields to form 
  formTemplate.appendChild(createInput(tt, 'tt'));
  formTemplate.appendChild(createInput(bid, 'bid'));
  formTemplate.appendChild(createInput(idx, 'idx'));

  }
};

Array.from(document.querySelectorAll('button.rep'))
.forEach(btn => btn.onclick = toggleReply)

放置在 HTML 文档最开头的表单如下所示:

<div id="form-template" style="display: none;">
    <form action="{% url 'reply_to_post' %}" id="rep-form" method="POST" style="display:inline" enctype="multipart/form-data">
      {% csrf_token %}

        <div style="width:75%;display:inline-block;">
            {{ personal_group_form.reply }}
        </div>

        <div style="width:22%;display:inline-block;float:right;text-align:center;">
            {{ personal_group_form.image }}
            <label for="browse_image_btn" style="cursor: pointer;"><img src="{{ STATIC_URL }}img/cam1.svg" width="70" height="70" /></label>
        </div>

        <button style="border:none;height:30px;" name="tid" value="{{ tid }}" type="submit">OK</button>
    </form>
</div>

忽略 {% 或 {{ 类型语法。那是 Django 。

最后，每个帖子内容下的回复按钮布局如下:

<form action="{% url 'post_buttons' %}" method="POST" style="display:inline">
   {% csrf_token %}
   <input id="payload" type="hidden" name="pl" value="{{ blob_id }}:{{ username }}:{{ score }}:{{ idx }}:{{ t }}:{{ tt }}:{{ tid }}:{{ img_width }}:{{ their_nick }}:{{ own_nick }}:{{ is_res }}:{{ av_url }}">

   <button type="submit" class="rep" name="dec" value="1">reply</button>
   <button type="submit" name="dec" value="2">save</button>
   <button type="submit" name="dec" value="3">hide</button>

</form>

最后，我试过如下调整我之前发布的 JS 代码，但它没有给我正确的结果:

var formTemplate = document.querySelector('#form-template form');

function createInput(name, payload, id) {
    // populating input fields with correct values
    var input = document.createElement('input');
    input.setAttribute('id',id);
    input.setAttribute('type','hidden');
    input.setAttribute('name',name);    
    input.setAttribute('value',payload);    
    return(input);
}

function toggleReply(e) {
  // error-handling the case where there is no ghost form
  if (!formTemplate) return;

  // prevent form submission
  e.preventDefault();

  // first check if reply form was already added under reply button
  var to_remove = e.target.parentNode.nextSibling.querySelector("#rep-form");

  if (to_remove != null) {

      // move form back to being a ghost (it was already added under the reply button)
      document.querySelector('#form-template').insertAdjacentElement('afterbegin',formTemplate);

  } else {

      // moving ghost form into position
      e.target.parentNode.insertAdjacentElement('afterend', formTemplate);

      // getting value from "reply" button
      var payload = e.target.parentNode.querySelector('#payload').value;
      payload = payload.split(':');
      var tt = payload[5];
      var bid = payload[0];
      var idx = payload[3];

      // assigning populated input fields to formTemplate 
      formTemplate.appendChild(createInput('', tt, 'tt'));
      formTemplate.appendChild(createInput('', bid, 'bid'));
      formTemplate.appendChild(createInput('', idx, 'idx'));

  }
};

Array.from(document.querySelectorAll('button.rep'))
  .forEach(btn => btn.onclick = toggleReply)

我收到 TypeError: e.target.parentNode.nextSibling.querySelector is not a function。更改为 e.target.parentNode.nextSibling.getElementById() 也不起作用。事实上，即使只是打印 e.target.parentNode.nextSibling 的值也会产生错误的结果。请指教。

Answer 1

四处移动这种形式会使事情变得复杂。为什么不为每个帖子提供自己的表单，然后使用 display 切换它们呢？

var form = e.target.parentNode.querySelector('form');
form.style.display = form.style.display === 'none' ? 'block' : 'none';