0
このポップアップモーダルはどのようにして特定のタイトルの配列に参照されますか?私は4つのタイトルが配列にあるように。 4つのタイトルリストを出力します。しかし、ポップアップモーダルのそれぞれを開くと、最初のタイトルのみが表示されます。たとえば、2番目のタイトルのポップアップモーダルをクリックすると、最初のタイトルが表示されます。私はこれにどのように対処できますか?ブートストラップPopUpモーダルリファレンス配列
function getThings(){
let selected = localStorage.getItem('token');
console.log(selected);
fetch('http://sample_website/things', {
method: 'GET',
headers: {'Content-Type': 'application/json',
Authorization: 'Bearer ' + selected},
})
.then(data => data.json())
.then(data => {
let output = document.getElementById("display");
let iterable = data.data.data;
for(value of iterable){
output.innerHTML += `<div class="panel panel-primary">
<div class="panel-heading"><button class="btn btn-default view" data-toggle="modal" data-target="#viewmodal">View</button><button class="btn btn-danger delete">Delete</button>
<h5>${value.created_at}</h5></div>
<div class="panel-body"><h3>${value.title}</h3>
</div>
<div class="modal fade" id="viewmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title text-info" id="myModalLabel"><h3 class="text-center">${value.title}</h3>
</div>
<div class="modal-body">
${value.body}
</div>
</form>
</div>
</div>
</div>`;
}
})
.catch((err) => {
console.error(err);
})
}
コードを作成するとよいでしょう。 :) – Joseph