將對象數據傳遞到Bootstrap模式
[英]Pass Object Data to Bootstrap Modal
問題描述
當用戶單擊可用按鈕時，我希望將JavaScript Object數據傳遞給每個對象的特定“模態”窗口。 但是，當我測試並單擊按鈕時，會發生兩件事。 首先，什么都沒有顯示，如果有什么顯示，則每個模態的數據都是相同的，通常是最后一個對象的數據。
var radio = [ { name:"106 power", address:"1620 sw 11th st", phone:"305-892-9927" }, { name:"99 jamz", address:"1900 sw 19th st", phone:"305-892-9900" }, { name:"cool jamz", address:"3450 sw 167th st", phone:"304-892-9900" } ] for (i = 0; i < radio.length; i++){ document.getElementById('box').innerHTML += '<div class="box2">' + radio[i].name + '<br>' + radio[i].address + '<br> <button type="button class="button" data-toggle="modal" data-target="#myModal"> Click me! </button></div>'; }; $(document).ready(function(){ $(".button").on('click',function(){ $("#main-content").html('<div class="box3">' + radio[i].name + '<br>' + radio[i].address + '<br>' + radio[i].phone + '</div>'); }); });
.box{ width:400px; height:800px; background-color:grey; } .box2{ width:400px; height:100px; background-color:white; } .box3{ width:400px; height:100px; background-color:green; }
<!DOCTYPE html> <html lang="en-US"> <head> <title>Help</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384- Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256- 2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384- JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div id="box" class="box"></div> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">× </button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body " id="main-content"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data- dismiss="modal">Close </button> </div> </div> </div> </div> </body> </html>
1 個解決方案
解決方案1
0 已采納 2018-05-02 04:36:49
當模態顯示時，您需要使用$('#myModal').on('shown.bs.modal')捕獲事件，並使用e.relatedTarget獲取您單擊的當前按鈕
我在按鈕上添加了data-index ，因此我們可以獲取當前廣播
var radio = [ { name:"106 power", address:"1620 sw 11th st", phone:"305-892-9927" }, { name:"99 jamz", address:"1900 sw 19th st", phone:"305-892-9900" }, { name:"cool jamz", address:"3450 sw 167th st", phone:"304-892-9900" } ] for (i = 0; i < radio.length; i++){ document.getElementById('box').innerHTML += '<div class="box2">' + radio[i].name + '<br>' + radio[i].address + '<br> <button type="button class="button" data-index="' + i + '" data-toggle="modal" data-target="#myModal"> Click me! </button></div>'; }; $(document).ready(function(){ $('#myModal').on('shown.bs.modal', function(e) { var i = $(e.relatedTarget).data('index'); console.log(i); $("#main-content").html('<div class="box3">' + radio[i].name + '<br>' + radio[i].address + '<br>' + radio[i].phone + '</div>'); }) });
.box{ width:400px; height:800px; background-color:grey; } .box2{ width:400px; height:100px; background-color:white; } .box3{ width:400px; height:100px; background-color:green; }
<!DOCTYPE html> <html lang="en-US"> <head> <title>Help</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384- Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256- 2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384- JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <div id="box" class="box"></div> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">× </button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body " id="main-content"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data- dismiss="modal">Close </button> </div> </div> </div> </div> </body> </html>
Bootstrap Modal - 使用Javascript將數據傳遞到Modal
[英]Bootstrap Modal - Pass data into Modal using Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.