Как отправить дополнительную информацию о строке OnClick?

Question

У меня есть цикл for для создания карточек моей главной страницы, у меня есть 3 модели Изображение, название и тело Идея состоит в том, чтобы получить конкретную информацию для каждой карты, которую я нажимаю на его кнопке «Просмотр».

Я использую django с python, и я пытаюсь сделать что-то вроде новостного сайта, где вы видите заголовок на карточках на главной странице, и когда вы нажимаете на них, вы получаете полосу прокрутки с полной информацией о арктический, проблема заключается в том, что, поскольку я зацикливаюсь на базе данных, чтобы получить все карточки, при нажатии на кнопку «Просмотр» не видно, какую из них я получаю тело текста, которое является последним в списке.

<div class="row">
        {%for job in jobs.all%}

        <div class="col-md-4">
          <div class="card mb-4 shadow-sm">
           <img class ="card-img-top" src ="{{job.image.url}}" />
            <div class="card-body">
              <p class="card-text">{{job.title}}</p>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#exampleModalScrollable"
                  >
                    View
                  </button>




                  <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-scrollable" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title" id="exampleModalScrollableTitle">Full artical</h5>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body">

                          {{job.body}}

                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

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

              </div>
            </div>
          </div>
        </div>
        {%endfor%}
        </div>

Answer 1

Вы создаете несколько узлов с идентификатором exampleModalScrollable, что не совсем допустимо. Не знаю, от какой библиотеки внешнего интерфейса вы зависите, но я считаю, что вы хотите, чтобы data-target в кнопке совпал с id модального для каждого элемента. Самый простой - использовать идентификатор модели; что-то вроде:

<button type="button" class="btn btn-outline-primary" data-toggle="modal"
    data-target="#job-modal-{{job.id}}">

и

<div class="modal fade" id="job-modal-{{job.id}}" tabindex="-1"
    role="dialog" aria-labelledby="{{job.title}}" aria-hidden="true">