Блог

Я работаю над проектом django, в котором у меня есть несколько загрузочных карт, которые отображают некоторые данные, которые я получаю из базы данных. Точнее, каждая карта представляет проект, поэтому у него есть его название, его описание, его крайний срок и так далее. В конце карточки я помещаю кнопку для открытия модального файла, чтобы показать больше деталей проекта, которые не отображаются на карточке. Моя проблема в том, что я не знаю, как получить правильную информацию о карточках для каждого модального, например, даже если я нажму на кнопку третьей карты, чтобы открыть modali для просмотра деталей третьих проектов, модальный по-прежнему показывает мне данные первого проекта (такон берет их с первой карты). Кто-нибудь может мне помочь, пожалуйста? Здесь код карты:

 {% for project in projects %}
    <div class="col-3">
        <div class="card bg-light border-dark my-3 mx-3" style="max-width: 18rem; min-height:100%">
            <div class="card-header" style="background-color: #b3b492;"><h3>{{project.titolo }}</h3></div>
            <div class="card-body">
                <h5 class="card-title">Deadline: {{ project.date|date:"d/m/Y" }}</h5>
                <p class="card-text">{{ project.description}}</p>
                <hr>
                <small>
                    <p class="card-text" style="font-weight:bold;"> {{ project.client }</p>  
                </small>
          
                <button type="button" class="btn btn-sm card-button" data-toggle="modal"
                        data-target=".bd-example-modal-lg" 
                        style="position: absolute; bottom: 10px; right:50px">
                    {% csrf_token %}
                    <svg width="1.2em" height="1.2em" viewBox="0 0 16 16" class="bi bi-eye" fill="#b3b492"
                         xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                              d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z"/>
                        <path fill-rule="evenodd"
                              d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                    </svg>
                </button>
  

Вам нужно обрабатывать уникальность для каждого модального.

 <button type="button" class="btn btn-sm card-button" data-toggle="modal"
                    data-target="#modal-project-{{project.pk}}" 
                    style="position: absolute; bottom: 10px; right:50px">
  

теперь у каждого проекта должен быть свой определенный модальный. Что-то вроде :

 <!-- Modal -->
<div class="modal fade" id="modal-project-{{project.pk}}" tabindex="-1"
    aria-labelledby="modal-project-{{project.pk}}-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-project-{{project.pk}}-label">modal exemple</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">amp;times;</span>
                </button>
            </div>
            <div class="modal-body">
                Something in the modal for this project
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
  

Конечно, все это в вашем цикле {% for project в projects %}.