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

您正在生成多个都具有ID exampleModalScrollable的节点，这是不合法的。不知道您要依赖哪个前端库，但是我相信您希望按钮中的data-target与每个项目的模式的id对齐。最简单的方法是使用模型的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">

如何发送额外的字符串信息OnClick？

1 个答案: