Bootstrap-模式仅显示第一项 [英] Bootstrap - Modal only shows the first item

问题描述

我正在使用Bootstrap设计此网页.该页面包含一个表格，我可以在其中使用modal来显示有关所选项目的更多详细信息.

I'm using Bootstrap to design this webpage. This page contains a table where I use modal to show more details about the selected item.

我的问题是表格上的所有按钮仅重定向到第一项的第一个细节.我正在考虑id名称并将其放入数组中，但是它不起作用(或者我做错了).

My problem is that all buttons on the table only redirects to the first detail of the first item. I was thinking of the id name and making it into array, but it does not work (or I did it wrong).

下面是一个示例代码，旨在为您提供一个想法:

Here's a sample code to give you an idea:

<?php
(loop){

$itemtopic=$loop['item'];
$data=$loop['data'];

?>

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="float:right; margin-left:5px;" title="New User"><?php echo $itemtopic; ?></button>

            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">Create New User</h4>
                  </div>
                  <div class="modal-body">
                    <?php echo $data; ?>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>

<?php
} /* END OF LOOP */
?>

如何显示所选项目的相应数据，而不仅是第一项的第一个详细信息?

How can I show the corresponding data with the selected item and not only just the first detail of the first item?

推荐答案

您不必循环模态元素，所需的是在显示模态之前更改数据.请尝试以下代码:

you don't have to loop the modal elements, What you need is change the data before displaying the modal. please try the following code:

<script> 
 //Please visit http://www.nokiflores.com
   $(document).ready(
    function() {
         $("button.btn").click(    
             function(e) {
             var parent_div =  $(this).closes("div");
             var val =   $(parent_div).find("input[name=data]").val();
             $("#modal_body").html(val );
              $("#myModal").modal();
          });
    } ); 

});

    </script>

<?php $_data = array(); $_data[] = array('id'=>1,'data'=>"data1", 'item'=>"item1");  $_data[] = array('id'=>2,'data'=>"data2", 'item'=>"item1");  ?>

<?php foreach($_data  as  $data ) { ?>

<div class="data">

<input type="hidden" value="<?php echo $data['data'] ; ?>" name="data" />

<!--please notice that i remove the modal functions in this  button-->
    <button class="btn btn-primary" id="<?php echo $data['id'] ; ?>" style="float:right; margin-left:5px;" title="New User"><?php echo $data['item'] ; ?></button> 

</div>

<?php } ?>



            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">Create New User</h4>
                  </div>
                  <div id="modal_body" class="modal-body">

                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>

这篇关于Bootstrap-模式仅显示第一项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！