将对象数据传递给Bootstrap模式

时间:2018-05-02 03:10:18

标签: javascript object bootstrap-modal

当用户点击可用按钮时,我希望将JavaScript对象数据传递到每个对象的特定模态窗口。但是,当我测试并单击按钮时,会发生两件事。首先,没有任何显示,如果某些内容确实显示,则每个模态的数据都是相同的,通常是最后一个对象的数据。



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>');
	 
    });
    
});
&#13;
.box{
    width:400px;
    height:800px;
    background-color:grey;
    }
    .box2{
    width:400px;
    height:100px;
    background-color:white;
    }
    .box3{
    width:400px;
    height:100px;
    background-color:green;
    }
&#13;
<!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">&times;            
    </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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

显示模态时,您需要使用$('#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">&times;            
    </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>