css - django 模板迭代列表 : how create unique overlay-popup for each item?

Question

在 django 中很容易从模板接收到的上下文中生成标题的迭代列表:

{% for instance in object_list %}
<li>{{instance.international_title}} </li>
{% endfor %}

并且在 css 中很容易创建弹出覆盖:

#overlay
{
    height:300px;
    width:300px;
    margin:0 auto;
    position:relative;
    z-index:10;
    display:none;
    border:5px solid #cccccc;
    border-radius:10px;
}
<div align="center">
    <a href="#overlay"> Click Title for Detail</a>
</div>
<div id="overlay">
<p> Here is the text giving more detail<p>
</div>

希望能够将唯一文本与每个唯一标题 {{instance.international_short_description}} 相关联，以用于叠加弹出窗口。但是看不到如何做到这一点。是否有必要以某种方式创建一系列 css 类:#overlay1、#overlay2，每个类都有自定义 href？是否可以使用单个类，将变量传递给它，然后选择正确的文本？未能找到示例。

Answer 1

您可以更改 id，例如通过添加实例的主键，例如:

{% for instance in object_list %}
    <div align="center">
        <a href="#overlay<b>{{ instance.pk }}</b>">{{ instance.international_title }}</a>
    </div>
    <div id="overlay<b>{{ instance.pk }}</b>">
    <p>{{ instance.international_short_description }}<p>
    </div>
{% endfor %}