有没有办法将变量传递给 django 模板中的 <div> id？答案

【问题标题】：Is there a way to pass in variable to <div> id in django template?有没有办法将变量传递给 django 模板中的 <div> id？
【发布时间】：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="collapse{{item.item_name}}" 但这似乎不起作用。有没有办法在

id 中传入变量？

【问题讨论】：

究竟是什么不起作用
data-target="#collapseOne" 也需要更新以匹配 => data-target="#collapse{{item.item_name}}"
所以我在网页上显示了我的项目。每当我单击一个项目打开它时，它会同时打开页面上的每个项目，因为所有的 id 都是相同的。我想唯一地命名每个 id，以便它只在一个项目上切换折叠
@Ben 我已经尝试过了，每个应该匹配的 id 仍然不起作用
您是否也更改了aria-controls="collapseOne"？ (aria-controls="collapse{{item.item_name}}" )

标签： html css django bootstrap-4 django-templates

【解决方案1】：

试试这个

{% for item in items %}
<div id="accordion">
  <div class="card">
    <div class="card-header" id="heading{{forloop.counter}}">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapse{{forloop.counter}}" aria-expanded="true" aria-controls="collapse{{forloop.counter}}">
          {{item.item_name}}
        </button>
      </h5>
    </div>

    <div id="collapse{{forloop.counter}}" class="collapse show" aria-labelledby="heading{{forloop.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

【讨论】：