有没有办法将变量传递给 django 模板中的 <div> id?
Posted
技术标签:
【中文标题】有没有办法将变量传递给 django 模板中的 <div> id?【英文标题】:Is there a way to pass in variable to <div> id in django template? 【发布时间】:2021-05-12 20:04:48 【问题描述】:我是 Django 模板语言的新手,我正在玩引导折叠以显示我的项目。以下是我的代码:
% for item in items %
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
item.item_name
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
item.description
</div>
</div>
</div>
</div>
% endfor %
这取自 Bootstrap 崩溃文档,here。在这个实现中,所有传入的项目都将具有相同的 id,collapseOne。所以每当我点击一个项目,任何项目,它会折叠/取消折叠页面上的每个项目。我试过id="collapseitem.item_name"
但这似乎不起作用。有没有办法在
【问题讨论】:
究竟是什么不起作用data-target="#collapseOne"
也需要更新以匹配 => data-target="#collapseitem.item_name"
所以我在网页上显示了我的项目。每当我单击一个项目打开它时,它会同时打开页面上的每个项目,因为所有的 id 都是相同的。我想唯一地命名每个 id,以便它只在一个项目上切换折叠
@Ben 我已经尝试过了,每个应该匹配的 id 仍然不起作用
您是否也更改了aria-controls="collapseOne"
? (aria-controls="collapseitem.item_name"
)
【参考方案1】:
试试这个
% for item in items %
<div id="accordion">
<div class="card">
<div class="card-header" id="headingforloop.counter">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseforloop.counter" aria-expanded="true" aria-controls="collapseforloop.counter">
item.item_name
</button>
</h5>
</div>
<div id="collapseforloop.counter" class="collapse show" aria-labelledby="headingforloop.counter" data-parent="#accordion">
<div class="card-body">
item.description
</div>
</div>
</div>
</div>
% endfor %
https://docs.djangoproject.com/en/3.1/topics/templates/#the-django-template-language
【讨论】:
以上是关于有没有办法将变量传递给 django 模板中的 <div> id?的主要内容,如果未能解决你的问题,请参考以下文章
如何将javascript变量传递给django自定义过滤器