在我的django项目中，根据项目网格点击，希望在Bootstrap模态上显示特定数据，但数据没有在模态上发生变化

Question

<div class="container software-showcase-trio">
               <div class="row">
                  {% for maritime_content in maritime_project_content %}
                  <div class="col-lg-3 col-md-3 col-sm-6">
                     <a href="#" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#maritime-software-modal">
                        <div class="software-block-trio" style="background-image:url({{media_url}}{{maritime_content.cover_image}});">
                           <div class="software-block-hover-trio">
                              <h1>{{maritime_content.title}}</h1>
                           </div>
                        </div>
                     </a>
                     <!-- Modal -->
                     <div class="modal fade" id="maritime-software-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-xl">
                           <div class="modal-content">
                              <div class="modal-header">
                                 <h6 class="modal-title" id="exampleModalLabel"></h6>
                                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                              </div>
                              <div class="modal-body maritime-software-modal-body">
                                 <div class="maritime-modal-title">
                                    <h1 class="fw-bold display-5">{{maritime_content.title}}</h1>
                                 </div>
                                 <img src="{{media_url}}{{maritime_content.cover_image}}" height="500" width="1000" alt="">
                                 <div class="maritime-fields-title">
                                    <div class="maritime-project-details">
                                       <h3 class="fw-bold">Project Details</h3>
                                       <p class="">{{maritime_content.project_details}}</p>
                                    </div>
                                    <div class="maritime-problem-details">
                                       <h3 class="fw-bold">Problem</h3>
                                       <p>{{maritime_content.problem_details}}</p>
                                    </div>
                                    <div class="maritime-solution-details">
                                       <h3 class="fw-bold">Solution</h3>
                                       <p>{{maritime_content.solution_details}}</p>
                                    </div>
                                    <div class="maritime-technology-list">
                                       <h3 class="fw-bold">Technologies</h3>
                                       <p>{{maritime_content.technology_list}}</p>
                                    </div>
                                 </div>
                              </div>
                              <div class="modal-footer">
                                 <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
                              </div>
                           </div>
                        </div>
                     </div>
                     <!-- modal -->
                  </div>
                  {% endfor %}
               </div>
            </div>
         </div>       

在我的Django项目中，我将显示基于类别的项目网格，而某人单击该特定项目网格时，模态将与特定的项目数据一起出现。但是我在每个模态外观上都会收到类似数据的问题。
[1]： https://i.sstatic.net/kcnyf.png [2]： https://i.sstatic.net/yswfi.png [3]： https://i.sstatic.net/fxope.png

Answer 1

之所以发生这种情况，是因为每个模态的ID在模板中相同。

根据JavaScript的规则ID，每个元素的规则ID应该是
唯一。

有很多方法可以解决您的问题，但是简短的方法是将{{forloop.counter}}放入ID中。

<div class="container software-showcase-trio">
               <div class="row">
                  {% for maritime_content in maritime_project_content %}
                  <div class="col-lg-3 col-md-3 col-sm-6">
                     <a href="#" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#maritime-software-modal">
                        <div class="software-block-trio" style="background-image:url({{media_url}}{{maritime_content.cover_image}});">
                           <div class="software-block-hover-trio">
                              <h1>{{maritime_content.title}}</h1>
                           </div>
                        </div>
                     </a>
                     <!-- Modal -->
                     <div class="modal fade" id="maritime-software-modal{{forloop.counter}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-xl">
                           <div class="modal-content">
                              <div class="modal-header">
                                 <h6 class="modal-title" id="exampleModalLabel"></h6>
                                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                              </div>
                              <div class="modal-body maritime-software-modal-body">
                                 <div class="maritime-modal-title">
                                    <h1 class="fw-bold display-5">{{maritime_content.title}}</h1>
                                 </div>
                                 <img src="{{media_url}}{{maritime_content.cover_image}}" height="500" width="1000" alt="">
                                 <div class="maritime-fields-title">
                                    <div class="maritime-project-details">
                                       <h3 class="fw-bold">Project Details</h3>
                                       <p class="">{{maritime_content.project_details}}</p>
                                    </div>
                                    <div class="maritime-problem-details">
                                       <h3 class="fw-bold">Problem</h3>
                                       <p>{{maritime_content.problem_details}}</p>
                                    </div>
                                    <div class="maritime-solution-details">
                                       <h3 class="fw-bold">Solution</h3>
                                       <p>{{maritime_content.solution_details}}</p>
                                    </div>
                                    <div class="maritime-technology-list">
                                       <h3 class="fw-bold">Technologies</h3>
                                       <p>{{maritime_content.technology_list}}</p>
                                    </div>
                                 </div>
                              </div>
                              <div class="modal-footer">
                                 <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
                              </div>
                           </div>
                        </div>