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

我是一个比较新的web程序员，所以这可能是一个通过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 %}

{%for think in user.thinks%}
{{think.body}
接近
保存更改
{{think.body}
{%endfor%}

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

当你点击图标时，会弹出一个带有思想主体的模态。我遇到的问题是所有情态动词都包含相同的预填充思想（列表中的第一个）

编辑图标上的链接（href={{+/edit/“~think.id}}）以及面板主体是正确的，但是当您加载模式时，它没有加载正确的思想。有什么想法吗

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

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

函数testFun（变量）{document.getElementById（'think_id'）.inne‌​rHTML=变量；}

它正在工作，但我只能在其格式如下时传递信息：

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

<h1>thought_id</h1>

是否有任何方法可以更改此函数，以便将其作为字符串传递，如下所示：

<h1>thought_id</h1>

think\u id

同样，这不是最有效的解决方案，但可以避免将模态拉到循环之外，并使用JS更新模态

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

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

您的新链接：

$(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>

<!-- 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>

您的模式（for循环之外）：

$(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>

<!-- 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>

接近
保存更改

Ah。。。你的模态在for循环中。我没有看到任何唯一的ID来识别模态。它只会打开第一个模态，而忽略循环中的所有其他模态。从技术上讲，您可以为您的模式和链接创建一个自定义id来打开它们，但这并不太有效。我会将模式移出for循环，然后使用一些JS在单击时更新模式中的思想和行动路径。请查看更新，无法在注释中使用代码。让我们从这里开始。。。单击按钮时，需要在模式中动态更新哪些项目？是不是只有文本区域中的思想体和形式动作？如果是这样的话，我会继续在下面发布一个更新的答案，最好是两个论点。textarea中的think.body和think.id将作为action=“/editThink/think.id”用于表单的操作，我决定按照您的建议提高效率。现在你知道如何通过js函数传递字符串了吗？嗨，安东尼，我更新了上面的答案。如果您遇到其他问题，请告诉我。哇，非常感谢您！你会如何格式化我点击的地方的代码。我很难弄清楚如何传递这些论点。这就是我所拥有的。更新了答案。请记住，您可能需要执行事件停止传播以终止href自然行为。在思想链接之后点击。我更新了我的js中的数据属性以匹配链接中的数据属性。我还在属性中的数据周围添加了正确的引号，并在其中添加了类。嗨，Anthony，我刚刚重新格式化了代码，做了很多小修改。请仔细阅读以上说明！！！！！或者走更有效的路线！！！！！