for loop django中的多模态引导答案

【问题标题】：multi modals bootstrap in for loop djangofor loop django中的多模态引导
【发布时间】：2016-03-03 16:17:05
【问题描述】：

我的 html 代码上有一个 for 循环来显示数据列表，当我在这个循环中创建了一个 Bootstrap Modal 来为列表的每个元素显示它时。模态似乎仅适用于列表的第一个元素。

    {% for i in lb %}
    <button  class="btn" id="myBtn" title="Ajouter Serveur" style="padding-bottom:1px" data-target="#myModal"><a class="icon-plus-sign" title="Ajouter Serveur"></a></button>
    <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">

                            <h4 class="modal-title">Ajouter Serveur</h4>
                        </div>
    <div class="modal-body">
                            <form method="post" class="loginForm">
                            <input type="hidden" name="lb" value="{{ i.Nom }}">
                            <h6>{% csrf_token %}
                                {{ form.as_table }}</h6>

                        <input type="submit" name="submit" class="btn btn-primary " value="Submit" />
                            </form>
                        </div>
                        <div class="modal-footer">

                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                        </div>

                        </div></div>

     {% endfor %}

【问题讨论】：

标签： django twitter-bootstrap bootstrap-modal

【解决方案1】：

button 和 <div class="modal"> 的 id 值在文档中必须是唯一的。尝试为 id 添加一个唯一值，即：

<div class="span12">
                {% for i in lb %}

                <div id="Person-1" class="box">
                    <div class="box-header">
                        <div class="span10">
                        <i class="icon-hdd icon-large"></i>
                        <h5>{{i.Nom}}</h5></div>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <button  class="btn" id="myBtn{{i.id}}" title="Ajouter Serveur" style="padding-bottom:1px" data-target="#myModal{{ i.id }}"><a class="icon-plus-sign" title="Ajouter Serveur"></a></button>
                        <div class="modal fade" id="myModal{{ i.id }}" role="dialog">
                        <div class="modal-dialog">

  <!-- Modal content-->
                        <div class="modal-content">
                        <div class="modal-header">

                            <h4 class="modal-title">Ajouter Serveur</h4>
                        </div>
                        <div class="modal-body">
                            <form method="post" class="loginForm">
                            <input type="hidden" name="lb" value="{{ i.Nom }}">
                            <h6>{% csrf_token %}
                                {{ form.as_table }}</h6>

                        <input type="submit" name="submit" class="btn btn-primary " value="Submit" />
                            </form>
                        </div>
                        <div class="modal-footer">

                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                        </div>

                        </div></div>
                    </div>
                    <div class="box-content box-table">
                    <table class="table table-hover tablesorter">
                        <thead>
                            <tr>
                                <th>Nom</th>
                                <th>Adresse</th>
                                <th>Etat</th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for j in s %}
                            {% if i.Nom == j.LB %}
                            <tr>
                                <td>{{ j.Nom }}</td>
                                <td>{{ j.Adresse }}</td>
                                {% if j.Etat == m %}
                                <td><a href="/etat/{{ j.id }}">Désactiver</a></td>
                                {% else %}
                                <td><a  href="/etat/{{ j.id }}">Activer</a></td>
                                {% endif %}
                                <td><a>Edit</a></td>
                                <td><a href="/delete/{{ j.id }}">Supprimer</a></td>
                                {% if j.Etat == m %}
                                <td class="icon-ok-circle icon-large" style="color : green" title="Activé"></td>
                                {% else %}
                                <td class="icon-remove-circle icon-large" style="color : red" title="Désactivé"></td>
                                {% endif %}
                            </tr>
                            {% endif %}
                            {% endfor %}
                        </tbody>
                    </table>
                    </div>

                </div>
                    <script>
                    var a = "{{ i.id }}"
                    $(document).ready(function(){
                    $("#myBtn"+a).click(function(){
                      $("#myModal"+a).modal({show:true});
                    });
                    });
                    </script>
                {% endfor %}

            </div>

【讨论】：

如果我将按钮的 id 更改为 myBtn{{i.Nom}} 并将 div 的 id 更改为 myModal{{i.Nom}} 所有按钮都不起作用但如果我只更改 div 的id 第一个模态仍然有效，并且知道我更改了将其放入循环的脚本：
重要的一点是每个模态 div 都有一个唯一的 id。并且 data-target 的值必须相同。这就是按钮知道要打开哪个模式的方式
而且你还需要为每个按钮id定义一个onclick函数！
是的，我进行了所有必要的更改，并将 onclick 函数放入循环中为每个按钮 id 定义它，但仍然不起作用。
请编辑您的问题并输入您现在拥有的代码

【解决方案2】：

在 HTML id 中具有唯一标识。所以我们在每个模态中使用唯一的 id

{% for l in lamp %}
<h6>change in button</h6>

<button data-target="#mymodal{{l.id}}"</button>

<h6>change in modal id </h6>

<div class="modal" id="mymodal{{l.id}}"</div>
 {% endfor %}

【讨论】：