我有一个包含一串字符串的引导程序模式。我还有一个纸牌循环，每个纸牌都有不同的“ id”。当我打开模态时，我希望ID显示在模态内部（以后将用它来获取更多信息，例如名称，描述和截止日期）。
这是我的JSON对象循环：
<div class="card-list-body">
{% for assignment in förseningar %}
<div class="card card-kanban" data-toggle="modal" data-target="#task-modal" id="{{assignment.id}}">
<script>
$('#task-modal').on('show.bs.modal', function(event) {
var Id = $(event.relatedTarget).data('id');
console.log("aaa")
$(event.currentTarget).find('input[name="modal-title"]').val(Id);
});
</script>
<div class="card-body">
<div class="dropdown card-options">
<button class="btn-options" type="button" id="kanban-dropdown-button-16" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item text-danger" href="#">Archive Card</a>
</div>
</div>
<div class="card-title" style="white-space: initial; ">
<a href="#" data-toggle="modal" data-target="#task-modal">
<h6 style="font-weight: 400">
{{assignment.type_of_assignment}} i {{assignment.course}} </h6>
</a>
</div>
<div class="card-title" style="white-space: initial; ">
<a href="" data-toggle="modal" data-target="#task-modal">
<h6 style="font-weight: 600">
{{assignment.name}}
</h6>
</a>
</div>
<div class="card-title" style="white-space: initial; ">
<a href="#" data-toggle="modal" data-target="#task-modal">
<h6 style="font-weight: 600; color: #d21b1b">
Försenad
</h6>
</a>
</div>
<style>
.hor-list {
list-style-type: none;
overflow: hidden;
display: block;
text-decoration: none;
padding: 0px;
margin-right: 5px;
}
.circle {
border-radius: 50%;
height: 30px;
text-align: center;
width: 30px;
}
.list-item {
float: left;
margin-right: 1px
}
.initials {
font-size: 15px;
font-weight: 800;
line-height: 1;
position: relative;
top: 3px;
/* 25% of parent */
}
</style>
<ul class="hor-list2">
{% for teacher in assignment.teachers.all %}
<li class = "list-item2">
<span class="step" style="background: {{teacher.userColor}};">{{teacher.user.username|first|capfirst}}</span>
</li>
{% endfor %}
<li class = "list-item2">
<p style="margin-left: 10px; font-size: 15px">
{{assignment.teachers.count}} Lärare:
{% for teacher in assignment.teachers.all %}
{{teacher.user.username|capfirst}}
{% endfor %}
</p>
</li>
</ul>
<hr>
<div class="card-title" style="white-space: initial; ">
<a href="#" data-toggle="modal" data-target="#task-modal">
<h6 style="font-weight: 600; color: rgb(82, 130, 202)">
Börja Plugga. Skapa en studieplan
</h6>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
这是模态的一部分：
<div class="modal modal-task" id="task-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-title">Create Brand Mood Boards</h5>
<button type="button" class="close btn btn-round" data-dismiss="modal" aria-label="Close">
<i class="material-icons">close</i>
</button>
</div>
<!--end of modal head-->
<div class="modal-body">
<div class="page-header">
<p class="lead">Assemble three distinct mood boards for client consideration</p>
<div class="d-flex align-items-center">
<button class="btn btn-round" data-toggle="modal" data-target="#user-manage-modal">
<i class="material-icons">add</i>
</button>
</div>
<div>
<div class="progress">
<div class="progress-bar bg-success" style="width:42%;"></div>
</div>
<div class="d-flex justify-content-between text-small">
<div class="d-flex align-items-center">
<i class="material-icons">playlist_add_check</i>
<span>3/7</span>
</div>
<span>Due 14 days</span>
</div>
</div>
</div>
<ul class="nav nav-tabs nav-fill" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#task" role="tab" aria-controls="task" aria-selected="true">Task</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#files" role="tab" aria-controls="files" aria-selected="false">Files</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="task" role="tabpanel">
<div class="content-list" data-filter-list="checklist">
javascript：
<script>
$('#task-modal').on('show.bs.modal', function(event) {
var Id = $(event.relatedTarget).data('id');
console.log("aaa")
$(event.currentTarget).find('input[name="modal-title"]').val(Id);
});
</script>
正如我所说。我想要一张卡片的详细信息页面。因此，当我按下卡时，会弹出一个窗口。我希望该弹出窗口包含卡片的更详细的页面。我想不通如何将数据放入弹出模式（任务模式），我认为这已经很接近了，但是如果有人可以帮助的话，将不胜感激！
答案 0 :(得分：1)
三个问题：
{% for assignment in förseningar %}）内，应该在外部。否则，将重复x次。var Id = $(event.relatedTarget).data('id')表示触发模式的按钮具有data-id属性。但是您没有，它具有id属性。因此，可以在data-id="{{ assignment.id }}"中设置<div class="card card-kanban" ...>或更改为var Id = $(event.relatedTarget).attr('id')。$(event.currentTarget).find('input[name="modal-title"]')表示您正在模态中寻找<input name="modal-title">元素，但我在任何地方都看不到。也许在这种情况下没有问题。但是，如果您要更改模式的modal-title格，则选择器应为：$(this).find('.modal-title')。注意：我使用$(this)而不是$(event.currentTarget)。应该不会有任何区别，因为currentTarget是模式，this也是如此。