将对象数据传递到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.