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

Question

我是网络程序员的新手，所以这可能是也可能不是通过 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>

Answer 1

同样，这不是最有效的解决方案，但可以避免您不得不将模态框拉出循环并使用 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>