如何在 OnClick 上发送额外的字符串信息？答案

【问题标题】：How do i send an extra string info OnClick?如何在 OnClick 上发送额外的字符串信息？
【发布时间】：2019-10-08 15:51:33
【问题描述】：

我有一个 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>

【问题讨论】：

标签： python html django

【解决方案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">

【讨论】：

谢谢你的快速回答，我明白你在说什么，这很有意义，但现在当我改变它时，滚动条没有打开，我认为它没有将数据目标识别为滚动条的 id 编辑-没关系我需要做的就是移动#谢谢！