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

Posted 2023-02-24

【中文标题】有没有办法将变量传递给 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" 但这似乎不起作用。有没有办法在

id 中传入变量？

【问题讨论】：

究竟是什么不起作用

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