Передайте данные объекта JavaScript в Bootstrap Modal - PullRequest
Новая
       9

Передайте данные объекта JavaScript в Bootstrap Modal

0 голосов
/ 28 апреля 2018

Я перебрал каждый объект и передал данные каждого объекта своему собственному 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">&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>

1 Ответ

0 голосов
/ 28 апреля 2018

Разница между идентификатором и классом заключается в том, что идентификатор может использоваться для идентифицировать один элемент, в то время как класс может быть использован для идентификации более чем один.

Так что вы должны изменить идентификатор с классом

Вот ваш код: 

<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>

Также у вас есть цикл, в котором вы пытаетесь прикрепить событие к кнопке # щелчок, который прикрепляет несколько событий к кнопке #, и когда вы нажимаете кнопку, она срабатывает много раз, поэтому, если вы хотите избежать этого много раз огонь, вы должны прикрепить событие вне цикла. 

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-attribute, это мой совет. измените свой код следующим образом: 

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'));
   });
});

Хранить произвольные данные, связанные с сопоставленными элементами, или возвращать значение в именованном хранилище данных для первого элемента в наборе согласованные элементы.

https://api.jquery.com/data/

...