如何使用 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();