这是我的MySQL代码，其中自动生成div：
<?php
$sql = "select id,city, event_date, capacity, eb_deadline, regular_deadline, venue, earlybirdstudentprice, regularstudentprice, lastminutestudentprice, earlybirdstudentcount, regularstudentcount, lastminutestudentcount, earlybirdproprice, regularproprice, lastminuteproprice, earlybirdprocount, regularprocount, lastminuteprocount from tbl_events";
$query = mysql_query($sql);
while ($row = mysql_fetch_array($query)) {
$id = $row['id'];
$city = $row['city'];
$event_date = $row['event_date'];
$date = date('F d', strtotime($event_date));
$capacity = $row['capacity'];
$eb_deadline = $row['eb_deadline'];
$regular_deadline = $row['regular_deadline'];
$venue = $row['venue'];
$earlybirdstudentprice = $row['earlybirdstudentprice'];
$regularstudentprice = $row['regularstudentprice'];
$lastminutestudentprice = $row['lastminutestudentprice'];
$earlybirdstudentcount = $row['earlybirdstudentcount'];
$regularstudentcount = $row['regularstudentcount'];
$lastminutestudentcount = $row['lastminutestudentcount'];
$earlybirdproprice = $row['earlybirdproprice'];
$regularproprice = $row['regularproprice'];
$lastminuteproprice = $row['lastminuteproprice'];
$earlybirdprocount = $row['earlybirdprocount'];
$regularprocount = $row['regularprocount'];
$lastminuteprocount = $row['lastminuteprocount'];
?>
<div class="col-sm-4">
<div class="card">
<a href="#myModal" role="button" data-toggle="modal">
<img src="img/bang.png" alt="Avatar" style="width:100%"></a>
<h4><b><?php echo $date; ?>, <?php echo $city; ?></b></h4>
</div>
</div>
<?php
}
?>
现在点击div后，我想将该div中显示的数据的id传递给模态并根据它获取数据，以便在模态中显示它。我的模态代码是：
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog" align="center">
<!-- Modal content-->
<div class="modal-content" align="center">
<div class="modal-header" align="center">
<button type="button" class="close" data-dismiss="modal">×</button>
<!-- <h2 class="modal-title">You're buying Tickets for</h2><br> -->
<h1 class="modal-title"><br>3D Printing Workshop</h1><br>
<h4 class="modal-title">July 14, Mumbai</h4>
<h5 class="modal-title">9.30 AM - 4.30 PM</h5><br>
<h5 class="modal-title">iKeva, Lower Ground 2, Art Guild House, Phoenix Market City, Mumbai 123456</h5>
</div>
<div class="modal-body" align="center">
<div class="container">
<div class="tabs">
<div class="col-sm-1"></div>
<div class="col-sm-8 col-xs-12">
<div class="title">
<h2>1. Choose Attendee Type</h2><br>
<h5><em>Tickets are strictly available on a First Come First Serve Basis only. <br> Students have to provide valid Student ID cards during Check-in</em></h5><br>
</div>
<br>
<ul class="nav nav-tabs nav-justified">
<li class="active" ><a data-toggle="tab" href="#professionals">Professionals</a></li>
<li><a data-toggle="tab" href="#students">Students</a></li>
</ul>
<br>
<form>
<div class="tab-content">
<div id="professionals" class="tab-pane fade in active">
<table class="table">
<tbody>
<tr>
<td>Early Bird Ticket</td>
<td>Ends on Mar 17</td>
<td>5 Left</td>
<td><select class="form-control" id="tickets">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>x</td>
<td>Rs. 1499/-</td>
</tr>
<tr>
<td>Regular Ticket</td>
<td>Ends on Mar 20</td>
<td></td>
<td><select class="form-control" id="tickets1" disabled>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>x</td>
<td>Rs. 1999/-</td>
</tr>
<tr>
<td>Last Minute Ticket</td>
<td>Ends on Mar 24</td>
<td></td>
<td><select class="form-control" id="tickets2" disabled>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>x</td>
<td>Rs. 2999/-</td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan="4"><hr style="width: 100%; margin-top: 0; margin-bottom: 0"></td>
</tr>
<tr>
<td><input type="text" style="font-size: 12px;" placeholder="Discount Coupon"><button class="btn btn-link">Apply</button></td>
<td></td>
<td colspan="3"><em>(incl of all taxes)</em></td>
<td>Rs. 1998/-</td>
</tr>
</tbody>
</table>
</div>
<div id="students" class="tab-pane fade">
<table class="table">
<tbody>
<tr>
<td>Early Bird Ticket</td>
<td>Ends on Mar 17</td>
<td>5 Left</td>
<td><select class="form-control" id="tickets3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>x</td>
<td>Rs. 1499/-</td>
</tr>
<tr>
<td>Regular Ticket</td>
<td>Ends on Mar 20</td>
<td></td>
<td><select class="form-control" id="tickets4" disabled>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>x</td>
<td>Rs. 1999/-</td>
</tr>
<tr>
<td>Last Minute Ticket</td>
<td>Ends on Mar 24</td>
<td></td>
<td><select class="form-control" id="tickets5" disabled>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>x</td>
<td>Rs. 2999/-</td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan="4"><hr style="width: 100%; margin-top: 0; margin-bottom: 0"></td>
</tr>
<tr>
<td><input type="text" style="font-size: 12px; text-align: center;" placeholder="Discount Coupon"><button class="btn btn-link">Apply</button></td>
<td></td>
<td colspan="3"><em>(incl of all taxes)</em></td>
<td>Rs. 1998/-</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<div class="title">
<h2>2. Attendee Details</h2><br>
<h5><em>Please enter details of individual Attendee(s). <br> In case of multiple attendees, Billing details should be same as the first Attendee.</em></h5><br>
</div>
<br>
<table class="table" id="attendees">
<tbody>
<tr>
<td><input type="text" class="form-control" name="" placeholder="Name"></td>
<td><input type="text" class="form-control" name="" placeholder="Email"></td>
<td><input type="text" class="form-control" name="" placeholder="Mobile No."></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
无需使用所有代码，您可以非常轻松地完成此操作。
<div>
<div id="hello" style="background-color:red; color :white;text-align:center; padding: 10px;">
<span id="this">blah blah</span>
<span id="something">More info</span>
</div>
</div>
<hr>
<div id="modal">
<div id="here1">Nothing</div>
<div id="here2">Nohing2</div>
</div>
使用这个jQuery来获取值并填充你的模态：
$('div#hello').click(function(){
var first= $('#this').html();
var second= $('#something').html();
$('#here1').html(first);
$('#here2').html(second);
});
请参阅我在这里的行动：http://jsbin.com/rulaqabane/edit?html,js,output
在此之后获取数据是一个单独的问题！
更新
$('div#hello').click(function(){
var id= $('#id').html();
$.get('/my/api/resource', {id: id}, function(data){
$('#target').html(data.whatever);
});
});