如何使用 javascript 隐藏 jinja 自动生成的 forms？

Question

我想知道如何在使用 javascript 加载 window 时隐藏自动生成的 forms。 我试图使用下面的代码隐藏所有这些。

window.onload = function() {
        document.getElementById("replyForm").style.display = "none";
}

function reply(this) {
        document.getElementById("replyForm").style.display = "block";
}

function closeReplyForm(this) {
        document.getElementById("replyForm").style.display = "none";
}

上面的代码应该做的是在页面加载时隐藏所有 forms 并在单击按钮时打开一个。 我正在发表评论部分，并希望 forms 以与 Disqus 相同的方式工作。 不幸的是，我编写的代码只隐藏了页面中的最后一个表单。 最后一个上面的所有自动生成的 forms 都是可见的。 我该如何解决这个问题？

这是我的代码结构

{% for comment in all_comments %}
<article class="mx-lg-2 mb-lg-3 pt-lg-2" >
      <img src="profile-pic">
      <p>comment</p>
</article>

<div id="replyForm" style="margin-left:80px; margin-top:25px">
     <form method="POST" action="">
        <fieldset class="form-group">
            {% if form.body.errors %}
            {{ form.body(class="form-control form-control-lg is-invalid") }}
            <div class="invalid-feedback">
                {% for error in form.body.errors %}
                    <span>{{ error }}</span>
                {% endfor %}
            </div>
            {% else %}
            {{ form.body(class="form-control form-control-lg") }}
            {% endif %}
        </fieldset>
        <div class="form-group">
            {{ form_reply.submit(class="") }}
            <button type="button" onclick="closeReplyForm(this)" class="btn btn-secondary px-lg- 
             5">Cancel</button>
        </div>
    </form>
</div>
{% endfor %}

<script type="text/javascript">
window.onload = function() {
        document.getElementById("replyForm").style.display = "none";
}

function reply(this) {
        document.getElementById("replyForm").style.display = "block";
}

function closeReplyForm(this) {
        document.getElementById("replyForm").style.display = "none";
}
</script>

Answer 1

这里的问题是您对表单使用相同的 id。

处理此问题的一种方法是 append 在 for 循环中使用 id 的索引

<div id="replyForm-{{ loop.index }}" style="margin-left:80px; margin-top:25px">

然后在 Js 中， this可以从中获取form

您可以默认隐藏我的全部，而不是在加载后隐藏所有 forms。

在 css

.hidden-form{
    display: none    
}

然后将此 class 添加到表单中。

Answer 2

经过一番研究后回复自己。 您可以先给它们一个唯一的 class 名称，用于识别它们，然后添加 jquery。

$('.replyForm').hide();

然后当单击按钮时，下面的代码将根据其唯一 ID（而不是 class 名称）打开一个特定表单

$('#replyForm-12').show();