我遍历了每个对象并将每个对象的数据传递给它自己的 div 以及每个 div 中的一个按钮，单击该按钮会打开一个模式窗口并仅显示该特定对象的数据。
但是，我的问题是，当我测试每个按钮以查看它是否显示数据时，我会看到所有对象模式窗口都显示了最后一个对象的数据。有任何想法吗？
<!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
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<style>
.box{
width:400px;
height:800px;
background-color:grey;
}
.box2{
width:400px;
height:100px;
background-color:white;
}
</style>
</head>
<body>
<div id="box" class="box"></div>
<script>
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"
}
]
for (i = 0; i < radio.length; i++){
var qb = radio[i].name;
document.getElementById('box').innerHTML += "<div class='box2'>" + radio[i].name + "<br>" + radio[i].address + "<br> <button type='button' id='button' data-toggle='modal' data-target='#myModal'>" + "Click me!" + "</button></div>";
$(document).ready(function(){
$("#button").click(function(){
$("#main-content").html(qb);
});
});
};
</script>
<!-- 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>
最佳答案
The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.
所以你应该用类改变id
这是你的代码:
<button type='button' id='button' data-toggle='modal' data-target='#myModal'>" + "Click me!" + "</button>
修改后的代码:
<button type='button' class='button' data-toggle='modal' data-target='#myModal'>" + "Click me!" + "</button>
还有一个循环，你试图在 #button click 上附加事件，在 #button 上附加几个事件，当你点击按钮时它会触发很多次，所以如果你想避免这么多time fire 你应该在循环之外附加事件。
for (i = 0; i < radio.length; i++){
var qb = radio[i].name;
document.getElementById('box').innerHTML += "<div class='box2'>" + radio[i].name + "<br>" + radio[i].address + "<br> <button type='button' id='button' data-toggle='modal' data-target='#myModal'>" + "Click me!" + "</button></div>";
}
$(document).ready(function(){
$("#button").click(function(){
$("#main-content").html(qb);
});
});
此外，如果你想在点击按钮时在内容中显示 radio.name，你应该使用 data- 属性，这是我的建议。用这个改变你的代码:
for (i = 0; i < radio.length; i++){
var qb = radio[i].name;
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' data-radio-name='" + qb + "'>" + "Click me!" + "</button></div>";
}
$(document).ready(function(){
$(".button").click(function(){
$("#main-content").html($(this).data('radio-name'));
});
});
Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.
关于javascript - 将 JavaScript 对象数据传递到 Bootstrap 模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50072719/