Jquery 将数据传递到引导模式Django模板

视图将元素列表（例如电影列表）传递给模板，并在表中呈现这些元素。每个元素都有它的细节，一个特定的元素有一个列表。这个列表的内容我想把它们放在一个模式中。我使用两个for循环执行此操作，如下所示：

<table>
  <thead>
    <tr>
       <td>title</td>
       <td>description</td>
       <td>hours</td>
    </tr>
  </thead>
  <tbody>
    {% for key in movies %}
     <tr>
       <td>{{ key.title }}</td>
       <td>{{ key.description }}</td>
       <td>
          <!--This button calls my modal-->
          {% for hour in key.hours %}
             <li>{{ hour }}</li>
          {% endfor %}
          <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal"></button>
       </td>
     </tr>
    {% endfor %}
  </tbody>
</table>

标题
描述
小时
{%用于电影中的密钥%}
{{key.title}}
{{key.description}}
{key.hours%中的小时数为%s}
{{小时}
{%endfor%}
{%endfor%}

我的modal在我的桌子下面，在包裹我桌子的div外面。 我想把第二个for循环的值传递给我的modal。当用户单击按钮时，值显示在模式中

我该怎么做？

您有两个选择

单击按钮时，可以使用Javascript更改模式的内容

不是一个模式，而是为每部电影及其时间创建一个模式。根据您单击的按钮，会打开不同的模式

---

正如@jastr所说，有两种解决方案。其中一个是这样做的：

• 用

• 将类添加到按钮，例如，

  openmodel

• 将click listener添加到按钮，当用户单击 按钮，您可以将列表添加到模式中

首先，对html进行一些更改：

<table>
  <thead>
    <tr>
       <td>title</td>
       <td>description</td>
       <td>hours</td>
    </tr>
  </thead>
  <tbody>
    {% for key in movies %}
     <tr>
       <td>{{ key.title }}</td>
       <td>{{ key.description }}</td>
       <td>
          <!-- You may want to put this whole list into your modal body -->
          <ul>
          {% for hour in key.hours %}
             <li>{{ hour }}</li>
          {% endfor %}
          </ul>
          <button type="button" class="btn btn-default open-modal" data-toggle="modal" data-target="#myModal"></button>
       </td>
     </tr>
    {% endfor %}
  </tbody>
</table>

标题
描述
小时
{%用于电影中的密钥%}
{{key.title}}
{{key.description}}

{key.hours%中的小时数为%s}
{{小时}
{%endfor%}

{%endfor%}

然后，您可以像这样添加一个单击侦听器，将列表插入到您的模式中：

<script type="text/javascript">
    $('.open-modal').click(function (e) {
        $('#myModal .modal-body').html($(this).prev().clone());
    });
</script>

$（'.open model'）。单击（函数（e）{
$（'#myModal.modal body'）.html（$（this.prev（）.clone（））；
});