Как сгенерировать указанную цель данных c для каждого объекта с помощью кнопок переключения данных?

Question

Я создал для l oop, который отображает отзывы на моей HTML странице. На этих обзорах есть кнопка, которая включает полный обзор. Нажатие на кнопку переключения в первом обзоре работает нормально, однако нажатие кнопки в обзоре № 2 переключает просмотр № 1

Проблема заключается в том, что в каждом обзоре нет уникальной цели данных. Поэтому мне, вероятно, придется создать какой-то способ создания новой цели данных для каждого обзора, но я не уверен, как можно об этом go. Есть идеи?

Спасибо, что прочитали это.

{% for review in reviews reversed %}

<div class="row">
  <div class="col-2">
      <!-- horizontal spacing -->
  </div>

  <div class="col-8 ">
    <div class="card text">
      <div class="card-header">
        <div class="row">
          <div class="col-3">
            <div class="text-primary"> {{ review.name }} </div>
          </div>
          <div class="col-6">
          </div>
          <div class="col-3">
            <div class="float-right text-secondary"> {{ review.pub_date_pretty }} </div>
          </div>
        </div>
      </div>
      <div class="card-body">
        <h5 class="card-title">Average Rating ({{review.avg_rating |floatformat:1 }}) </h5>
        <p class="card-text"> {{review.general_comments}} </p>

      <div class="collapse" id="review">

        <h5 class="card-title"> Interest {{review.interest_rating |floatformat:1 }} </h5>
        <p class="card-text"> {{review.interest}} </p>

        <h5 class="card-title"> Clarity {{review.clarity_rating |floatformat:1 }} </h5>
        <p class="card-text"> {{review.clarity}} </p>

        <h5 class="card-title"> Brevity {{review.brevity_rating |floatformat:1 }} </h5>
        <p class="card-text">  {{review.brevity}} </p>


      </div>

      </div>

      <div class="card-footer text-muted text-center">
        <a href="#" class="btn" data-toggle="collapse" data-target="#review">
          <div class="row">
          <div> Click to see full review </div>
          </div>
        </a>

      </div>
    </div>
  </div>
</div>

<br/>

{% endfor %}

Answer 1

Вы можете объединить число (l oop index) с переключателем данных "#review - {% i%}" и исходным идентификатором на div. Посмотрите (Джекилл?) L oop перечисление индекса.