Question

我如何将此弹出模式引用到特定的数组标题？就像我在阵列中有4个标题。它输出四个标题列表。但是当我打开每个弹出模式时，它只显示第一个的标题。例如，当我单击第二个标题的弹出模式时，它仍然显示第一个标题的标题。我该如何解决这个问题？

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">&times;</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);
})

}

Answer 1

我该如何解决这个问题？

我猜你可以尝试两次循环数据，并将FIRST值保存到数组中。然后，您可以根据数组键将值映射到PopUps。

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map

Bootstrap PopUp模态参考数组

1 个答案: