javascript - 在jinja条件语句中创建的模态都显示相同的数据

我是一个相对较新的网络程序员，所以这可能是也可能不是通过 JavaScript 解决的解决方案。如果没有，请指出我正确的方向。

{% for thought in user.thoughts %}

<div class="panel panel-default">

    <!-- Icon to Display Modal -->
    <div class="panel-heading" align="right">
        <a href={{ "/edit/" ~ thought.id }} data-toggle="modal" datatarget="#EditModal" data-placement="left" title="Edit">Icon Here!</a>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="LabelModel">
        <div class="modal-dialog" role="document">
            <div class="modal-content" align="left">

                    <!-- Form in Modal-->
                    <form  action={{ "/editthought/" ~ thought.id }} method="post" role="form">
                        <div class="modal-body">
                            <textarea class="form-control" rows="10" type="text">{{ thought.body }}</textarea>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Save changes</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

<!-- Thought Body -->
<div class="panel-body">
    {{ thought.body }}
</div>

{% endfor %}

在这里，我遍历与用户相关的每一个想法。每个想法都会显示一个面板，该面板显示带有用于编辑想法的图标的想法。

当您单击该图标时，会弹出一个带有思想正文的模式。我遇到的问题是所有模态都包含相同的预填充思想(列表中的第一个)。

编辑图标上的链接 (href={{ "/edit/"~thought.id }}) 和面板主体都是正确的，但是当您加载模态时，它没有加载正确的想法。有任何想法吗？

编辑:我不知道如何评论代码。根据建议，我将模式从 for 循环中取出。我目前正在使用此函数将数据从 for 循环中的按钮传递到我的模态。

<script>function testFun(variable){document.getElementById('thought_id').inne‌​rHTML=variable;}</sc‌​ript>

它正在工作，但是如果它的格式如下，我只能传递信息:

<h1 id="thought_id"></h1>

有什么方法可以更改此函数，以便我可以将其作为字符串传递，例如:

<h1>thought_id</h1>

最佳答案

同样，这不是最有效的解决方案，但会阻止您将模态拉出循环并使用 JS 更新模态。

快速修复您的链接数据目标

<a href={{ "/edit/" ~ thought.id }} data-toggle="modal" datatarget="#EditModal_{{thought.id}}" data-placement="left" title="Edit">

快速修复您的模态 ID

<div class="modal fade" id="EditModal_{{thought.id}}" tabindex="-1" role="dialog" aria-labelledby="LabelModel">

!!!!!!或者走更高效的路线!!!!!!

如果您确实采取了将对话框移出 for 循环的方法，您可以通过向链接添加一个类并将单击事件附加到它们来执行以下操作。还将 data-thought_id 和 data-thought_body 添加到 for 循环中的链接。

jQuery:

$(function() {
  $('.thought-link').click(function(event) {
    event.preventDefault();
    var action_path = '/editthought/' + $(this).attr('data-thought_id');
    var thought_body = $(this).attr('data-thought_body');
    $('#EditModal form').attr('action', action_path);
    $('#EditModal textarea').text(thought_body);
    $('#EditModal').modal('show');
  });
});

您的新链接:

<a href="/edit/{{thought.id}}" data-toggle="modal" datatarget="#EditModal" data-placement="left" title="Edit" class="thought-link" data-thought_body="{{thought.body}}" data-thought_id="{{thought.id}}">Icon Here!</a>

你的模态(在 for 循环之外):

<!-- Modal -->
<div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="LabelModel">
  <div class="modal-dialog" role="document">
    <div class="modal-content" align="left">
      <!-- Form in Modal-->
      <form action="" method="post" role="form">
        <div class="modal-body">
          <textarea class="form-control" rows="10" type="text"></textarea>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
      </form>
    </div>
  </div>
</div>

关于javascript - 在jinja条件语句中创建的模态都显示相同的数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40937631/