如何在Django模板中为data target添加动态变量

嘿，我一眼就瞅出问题所在啦——你的按钮data-target属性写法不对，导致浏览器压根找不到对应的模态框！

你原来写的data-target='#'{{key}}，渲染后会变成类似data-target='#'my_config这种格式，这相当于给data-target设置了两个无效的值（'#'和my_config），完全不符合Bootstrap的选择器规则。正确的做法是把#和{{key}}拼接成一个完整的选择器，放在同一个引号里。

下面是修正后的完整代码：

{% for key,value in config.items %}
  <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#{{key}}">
    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
  </button>

  <div class="modal fade" id="{{ key }}" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">{{key}}</h4>
        </div>
        <div class="modal-body">
          <p>{{value}}</p>
          <!-- 这里用{{value}}就能展示当前循环项的对应内容啦 -->
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
{% endfor %}

几个关键修正点：

• 把data-target='#'{{key}}改成data-target="#{{key}}"，渲染后会变成data-target="#my_config"，Bootstrap就能精准识别要打开的模态框ID了
• 给模态框的id属性加上引号id="{{ key }}"，这是HTML属性的规范写法，避免key里包含特殊字符时出现意外问题

另外你提到要基于循环值展示对应内容，在模态框的modal-body里直接用{{value}}就能调用当前循环项的对应值，我已经在代码里加了注释提示~

内容的提问来源于stack exchange，提问作者Nikhilsome