显示和隐藏不同帖子的文本

Question

我有几个帖子，每个帖子由三部分组成：标题、用户名/日期和正文。我想做的是当我点击标题或用户名/日期时显示正文，如果我再次点击，则隐藏它。到目前为止，我所做的工作是有效的，但没有达到预期，因为当我有两个或更多的帖子时，即使我点击了上一个帖子之外的另一个帖子，它也只显示上一个文章的正文。所以我的目标只是显示与我点击的帖子相对应的隐藏文本正文

{% extends 'base.html' %}
{% block header %}
<h1>{% block title %}Test page{% endblock %}</h1>
<a class="action" href="{{ url_for('main_page.create') }}">New</a>
{% endblock %}
{% block content %}
{% for post in posts %}
<article class="post">
<header>
<script language="JavaScript">
function showhide(newpost)
{var div = document.getElementById(newpost);
if (div.style.display !== "block")
{div.style.display = "block";}
else {div.style.display = "none";}}
</script>
<div onclick="showhide('newpost')">
<h1>{{ post['title'] }}</h1>
<div class="about">by {{ post['username'] }} on {{ post['created'].strftime('%d-%m-%Y') }}</div>
</div>
</header>
<div id="newpost">
<p class="body">{{ post['body'] }}</p>
</div>
</article>
{% if not loop.last %}
<hr>
{% endif %}
{% endfor %}
{% endblock %}

当然，我尽可能多地寻找解决方案，但我有点停滞不前，而且我是HTML/JS/CSS的初学者。最后一件事，我目前正在使用Python的框架Flask。提前谢谢。

Answer 1

对于您的工作方法，您需要为每个帖子提供一个唯一的id。

将代码更改为

<div id="{{post_id}}">
<p class="body">{{ post['body'] }}</p
</div>

其中post_id是该帖子的唯一id，例如您正在使用的数据库中的id，您将其传递给视图中的模板。然后，将对onclick事件处理程序的调用更改为

<div onclick="showhide('{{post_id}}')">

如果没有唯一的id，也可以使用for循环的索引：用loop.index替换上面的所有post_id实例。有关更多信息，请参阅Jinja的for循环文档。