[英]How to hide jinja auto-generated forms using javascript?
I'd like to know how to hide auto-generated forms when the window loads using javascript.我想知道如何在使用 javascript 加载 window 时隐藏自动生成的 forms。 I attempted to hide all of them using the code below.
我试图使用下面的代码隐藏所有这些。
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";
}
What the code above is supposed to do is to hide all the forms on page load and open one when a button is clicked.上面的代码应该做的是在页面加载时隐藏所有 forms 并在单击按钮时打开一个。 I'm making a comment section and want the forms to work the same way they do with Disqus.
我正在发表评论部分,并希望 forms 以与 Disqus 相同的方式工作。 Unfortunately, the code I've written only hides the last form in the page.
不幸的是,我编写的代码只隐藏了页面中的最后一个表单。 All the auto-generated forms above the last one are visible.
最后一个上面的所有自动生成的 forms 都是可见的。 How do I solve this?
我该如何解决这个问题?
Here is what the structure of my code looks like这是我的代码结构
{% 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>
The issue here is you are using the same id for form.这里的问题是您对表单使用相同的 id。
One way to handle this problem is to append an index with id in for loop处理此问题的一种方法是 append 在 for 循环中使用 id 的索引
<div id="replyForm-{{ loop.index }}" style="margin-left:80px; margin-top:25px">
And then in Js, you can get form
from this
然后在 Js 中,
this
可以从中获取form
Instead of hiding all forms after they are loaded, you can hide my all by default.您可以默认隐藏我的全部,而不是在加载后隐藏所有 forms。
in css在 css
.hidden-form{
display: none
}
then add this class to the form.然后将此 class 添加到表单中。
Replying to myself after some research.经过一番研究后回复自己。 You can start by giving them a unique class name that will be used to identify them and then adding jquery.
您可以先给它们一个唯一的 class 名称,用于识别它们,然后添加 jquery。
$('.replyForm').hide();
then when the button is clicked the code below will open a specific form based on its unique ID (not the class name)然后当单击按钮时,下面的代码将根据其唯一 ID(而不是 class 名称)打开一个特定表单
$('#replyForm-12').show();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.