崩溃时仅显示下一个/一个元素

Question

我在Flask中有以下模板（但我不认为这是一个烧瓶问题：

Contact.html

<button type="button" class="btn btn-secondary btn-sm" data-target="#score" data-toggle="collapse" data-placement="right">Score</button>
<div id="score" class="collapse">
    <span class='dot green'></span> 1
</div>

Compare.html

<!-- I only added the key elements there are some other "formatting" parts.-->
{% include "contact.html" %}
{% include "contact.html" %}

正如您在Contact.html中看到的那样，我使用了collpase。参考：https://www.w3schools.com/bootstrap/bootstrap_collapse.asp

我的问题是，我比较了两个联系人，因此他们两个都有div，ID为score。 如果我现在单击第一个按钮以显示第一个联系人的分数，那么显然两个分数都被显示。但我只想透露我单击的联系人的分数。

我的想法不是像data-target="#score"这样说：Take the next #score element，但我不知道该怎么做。

Answer 1

我知道怎么做。就我而言，这基本上很容易。

由于每个联系人都有一个唯一的ID，我可以使用它来构建ID，如下所示：

<!-- Generate ID -->
{% set score_id = "score" + contact.idx|string  %}

<!-- Use the ID in the collapse-->
<button type="button" class="btn btn-secondary btn-sm" data-target="#{{score_id}}" data-toggle="collapse" data-placement="right">Score</button>
<div id="{{score_id}}" class="collapse">
    <span class='dot {{color}}'></span> {{ contact_score }}
</div>

然后，如果单击按钮，则只有一个会展开。因此，感谢@Anees Ijaz的评论。评论使我朝着正确的方向前进。