我有一个当前的模态设置，它使用jquery脚本在单个页面上允许多个模态。当前，用户选择图像，并且弹出相同的图像作为模态（event.target）。在这种情况下，我希望用户能够选择一个文本字符串，弹出相关的图像。我无法修改代码来执行此操作。为了清楚起见，我已将两个实例放在一个jsfiddle中。任何帮助将非常感激。
https://jsfiddle.net/csapidus/mh3hysrr/12/
jsfiddle中的相同代码如下：
<title>[BMED] Acrylic Breakdancing Contraption</title>
<link rel="icon" href="https://c1.staticflickr.com/5/4304/35858762401_3288711c9e_o.png">
<link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Raleway:100,500,600,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
<!-- <link href="css/bootstrap.min.css" rel="stylesheet"> -->
<style>
* { box-sizing: border-box; }
/* force scrollbar */
html { overflow-y: scroll; }
body { font-family: sans-serif; }
/* ---- grid ---- */
.grid {
background: ;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
width: 32.55%;
margin-bottom: 10px;
}
.grid-item {
float: left;
}
.grid-item img {
display: block;
max-width: 100%;
}
/******************** Image Modals ********************/
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 1.0;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
<body>
<div class="footerU">
<h1>[BMED] Acrylic Breakdancing Contraption</h1>
</div>
<div class="intro_unlim">
<p> The **** final project required students to develop a contraption with at least three connected moving parts. I elected to model a breakdancer's legs as he prepares for a headspin. Unfortunately, the final product came out looking like more of an upside down crab. The legs are made of thin acrylic, the wood for the base is walnut, and the wood for the body is paduak. </p>
<p> Estimated Building Cost: $35.00</p>
<br>
<p> Clicking this text should open up a modal that presents the first image</p>
<p> Clicking this text should open up a modal that presents the second image</p>
</div>
<div class="full">
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item">
<img id="Img1" class = "modal-img" data-index = "1" src="https://c1.staticflickr.com/5/4352/36316868716_a33d16e02e_b.jpg"/>
</div>
<div id="myModal1" class="modal" data-index="1">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption">paduak body of the contraption (cut using a jigsaw, and then sanded) nailed to rectangular walnut base</div>
</div>
<div class="grid-item">
<img id="Img2" class = "modal-img" data-index = "2" src="https://c1.staticflickr.com/3/2945/33377180683_9c7b27232f_b.jpg"/>
</div>
<div id="myModal2" class="modal" data-index="2">
<span class="close">×</span>
<img class="modal-content" id="img02">
<div id="caption">final product: paduak contraption with acrylic legs, a walnut base, and googley eyes</div>
</div>
</div>
</div>
<div class="return">
<div id="button"><a href="../index.html">Return to Homepage</a></div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4.2.0/dist/masonry.pkgd.min.js"></script>
<script>
// JQuery Method for Multiple Modals
$(function() {
$('body').on('click', '.modal-img', function(event) {
var $img = $(event.target);
var index = $img.data('index');
var $modal = $("#myModal" + index);
$modal.find('img').attr('src', $img.attr('src'));
$modal.find('#caption').text($img.attr('alt'));
$modal.css('display', 'block');
});
$('body').on('click', '.modal .close', function(event) {
var $modal = $(event.target).closest('.modal');
$modal.css('display', 'none');
});
});
// JQuery Method for Masonry
var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
percentPosition: true,
columnWidth: '.grid-sizer',
gutter: 10
});
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
</script>
</html>
答案 0 :(得分：0)
while($row = mysqli_fetch_array($result)){
$tmp = array();
$tmp["Aid"] = $row["Aid"];
$tmp["AName"] = $row["AName"];
$tmp["B"] = array();
$query1 = "select * from B where fk_Aid= ".$row["Aid"];
$result1 = mysqli_query($db->getConnection(),$query1);
if($result1){
while($row1 = mysqli_fetch_array($result1)){
$tmp1 = array();
$tmp1["Bid"] = $row1["Bid"];
$tmp1["BName"] = $row1["BName"];
$tmp1["C"] = array();
$query2 = "select * from C where fk_Bid = ".$row1["Bid"];
$result2 = mysqli_query($db->getConnection(),$query2);
if($result2){
while($row2 = mysqli_fetch_array($result2)){
$tmp2 = array();
$tmp2["Cid"] = $row2["Cid"];
$tmp2["CName"] = $row2["CName"];
$tmp2["Content"] = $row2["Content"];
array_push($tmp1["C"], $tmp2);
}
}
array_push($tmp["B"], $tmp1);
}
}
array_push($response["content_info"], $tmp);
}
https://jsfiddle.net/beljems/ubvvesrw/
我正在使用`See this jsfiddle link that I have created for you: `
，我希望这会对你有所帮助:)。