Django 項目 - 從引導卡打開模式

Question

我正在開發一個 django 項目，其中我有幾個引導卡，可以顯示我從數據庫中獲取的一些數據。 更准確地說，每張卡片都代表一個項目，因此它有它的標題、描述、截止日期等。 在卡片的末尾，我放了一個按鈕來打開一個模式，以顯示卡片中未顯示的項目的更多詳細信息。 我的問題是我不知道如何為每個模態獲取卡片的正確信息，例如即使我單擊第三張卡的按鈕打開模態查看第三個項目的詳細信息，模態仍然向我展示第一個項目的數據（所以它從第一張卡片中獲取它們）。 有人可以幫我嗎？ 這是卡的代碼：

{% 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>

Answer 1

您需要處理每個模態的唯一性。

<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">&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 in projects %} 循環中。