带有叠加层的jquery图片库，由于叠加层，无法在单击时获取正确的URL

Question

im试图在点击后弹出一个flexbox图像库。几乎所有东西都能工作，但我很难获得正确图像的url。我的代码只获取第一个图像的url，无论我点击哪个图像。有人能帮我指出我做错了什么吗？这是代码：

$(document).ready(function() {
$(".image-overlay").click(function() {
var url = $('.content img').attr('src');
$(".modal").css("display", "block");
$(".close").css("display", "block");
$('#img01').attr('src', url);
});
});
$(document).ready(function() {
$(".image-overlay").mouseover(function() {
$(this).css("opacity", "1");
});
$(".image-overlay").mouseout(function() {
$(this).css("opacity", "0");
});
});

$(document).ready(function() {
$(".close").click(function() {
$(".modal").css("display", "none");
});
});

.gallery {
box-sizing: border-box;
margin-top: 5%;
padding: 0 5%;
}
.gallery-container {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
}
.gallery-column1 {
-ms-flex: 18%;
/* IE10 */
flex: 18%;
max-width: 18%;
padding: 0 0.8em;
}
.gallery-column2 {
-ms-flex: 24.7%;
/* IE10 */
flex: 24.7%;
max-width: 24.7%;
padding: 0 0.8em;
}
.gallery-column3 {
-ms-flex: 31.2%;
/* IE10 */
flex: 31.2%;
max-width: 31.2%;
padding: 0 0.8em;
}
@media screen and (max-width: 700px) {
.gallery-column1,
.gallery-column2,
.gallery-column3 {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.gallery-column1 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column2 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column3 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding: 1%;
/* Location of the box */
top: 20%;
width: 320px;
/* Full width */
height: auto;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
left: 50%;
transform: translate(-50%, 0);
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;
}

/* Add Animation */
.modal-content,
#caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.8s;
animation-name: zoom;
animation-duration: 0.8s;
}
@-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.close {
display: block;
position: absolute;
right: 5%;
top: -2%;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}

/* Overlay 8*/
.content {
position: relative;
width: 100%;
max-width: 100%;
margin: auto;
overflow: hidden;
}
.content .image-overlay {
background: rgba(114, 208, 223, 0.8);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 8%;
bottom: 0;
right: 0;
opacity: 0;
cursor: pointer;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery-container">
<div class="gallery-column1">
<div class="content img1">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon" aria-hidden="true"></i>
</div>
<img id="myImg" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery1.png">

</div>
<div id="myModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img01">
</div>
<div class="content img4">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon2" aria-hidden="true"></i>
</div>
<img id="myImg4" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery4.png">
</div>
</div>

<div class="gallery-column2">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon3" aria-hidden="true"></i>
</div>
<img id="myImg2" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery2.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon4" aria-hidden="true"></i>
</div>
<img id="myImg5" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery5.png">
</div>
</div>
<div class="gallery-column3">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon5" aria-hidden="true"></i>
</div>
<img id="myImg3" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery3.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon6" aria-hidden="true"></i>
</div>
<img id="myImg6" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery6.png">
</div>
</div>
</div>
</div>

或我的代码笔网址：https://codepen.io/christmastrex/pen/mdVzXMd

Answer 1

欢迎Elka，您的问题在这一行：

var url= $('.content img').attr('src'); 

在事件内部，关键字this指的是当前图像覆盖。也就是说，为了找到图像，你需要选择下一个img对象。因此，您的代码将是：

var url= $(this).next('img').attr('src');

摘录：

$(".image-overlay").click(function(){
var url= $(this).next('img').attr('src');
$(".modal").css("display","block");
$(".close").css("display","block");
$('#img01').attr('src', url);
});
$(".image-overlay").mouseover(function(){
$(this).css("opacity", "1");
});
$(".image-overlay").mouseout(function(){
$(this).css("opacity", "0");
});
$(".close").click(function(){
$(".modal").css("display", "none");
});

.gallery{
box-sizing: border-box;
margin-top:5%;
padding: 0 5%;
}

.gallery-container {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
}
.gallery-column1 {
-ms-flex: 18%; /* IE10 */
flex: 18%;
max-width: 18%;
padding: 0 0.8em;
}
.gallery-column2 {
-ms-flex: 24.7%; /* IE10 */
flex: 24.7%;
max-width: 24.7%;
padding: 0 0.8em;
}
.gallery-column3 {
-ms-flex: 31.2%; /* IE10 */
flex: 31.2%;
max-width: 31.2%;
padding: 0 0.8em;
}
@media screen and (max-width: 700px) {
.gallery-column1, .gallery-column2, .gallery-column3 {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}

.gallery-column1 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column2 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column3 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding: 1%; /* Location of the box */
top: 20%;
width: 320px; /* Full width */
height: auto; /* Full height */
overflow: auto; /* Enable scroll if needed */
left: 50%;
transform: translate(-50%, 0);
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;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.8s;
animation-name: zoom;
animation-duration: 0.8s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}

.close {
display:block;
position: absolute;
right: 5%;
top: -2%;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* Overlay 8*/
.content {
position: relative;
width: 100%;
max-width: 100%;
margin: auto;
overflow: hidden;
}
.content .image-overlay {
background: rgba(114,208,223,0.8);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 8%;
bottom: 0;
right: 0;
opacity: 0;
cursor: pointer;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery" id="gallery">
<div class="gallery-container">
<div class="gallery-column1">
<div class="content img1">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon" aria-hidden="true"></i>
</div>
<img id="myImg" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery1.png">
</div>
<div id="myModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img01">
</div>
<div class="content img4">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon2" aria-hidden="true"></i>
</div>
<img id="myImg4" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery4.png">
</div>
</div>
<div class="gallery-column2">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon3" aria-hidden="true"></i>
</div>
<img id="myImg2" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery2.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon4" aria-hidden="true"></i>
</div>
<img id="myImg5" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery5.png">
</div>
</div>
<div class="gallery-column3">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon5" aria-hidden="true"></i>
</div>
<img id="myImg3" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery3.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon6" aria-hidden="true"></i>
</div>
<img id="myImg6" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery6.png">
</div>
</div>
</div>
</div>

Answer 2

我更改了js 中的以下行

var url= $('.content img').attr('src'); 

至

var url = $(this).siblings('img').attr('src');

因此，您得到的图像是单击的.image-overlay的兄弟图像

/*var myVar = document.querySelectorAll('.content img');
var mySrc="";
for (var i = 0; i < myVar.length; i++) {
mySrc = myVar[i].getAttribute('src');
//alert(mySrc);


}*/
$(document).ready(function() {
$(".image-overlay").click(function() {
var url = $(this).siblings('img').attr('src');
$(".modal").css("display", "block");
$(".close").css("display", "block");
$('#img01').attr('src', url);
});
});
$(document).ready(function() {
$(".image-overlay").mouseover(function() {
$(this).css("opacity", "1");
});
$(".image-overlay").mouseout(function() {
$(this).css("opacity", "0");
});
});

$(document).ready(function() {
$(".close").click(function() {
$(".modal").css("display", "none");
});
});

.gallery {
box-sizing: border-box;
margin-top: 5%;
padding: 0 5%;
}
.gallery-container {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center;
}
.gallery-column1 {
-ms-flex: 18%;
/* IE10 */
flex: 18%;
max-width: 18%;
padding: 0 0.8em;
}
.gallery-column2 {
-ms-flex: 24.7%;
/* IE10 */
flex: 24.7%;
max-width: 24.7%;
padding: 0 0.8em;
}
.gallery-column3 {
-ms-flex: 31.2%;
/* IE10 */
flex: 31.2%;
max-width: 31.2%;
padding: 0 0.8em;
}
@media screen and (max-width: 700px) {
.gallery-column1,
.gallery-column2,
.gallery-column3 {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
.gallery-column1 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column2 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.gallery-column3 img {
margin-top: 1.5em;
vertical-align: middle;
width: 100%;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding: 1%;
/* Location of the box */
top: 20%;
width: 320px;
/* Full width */
height: auto;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
left: 50%;
transform: translate(-50%, 0);
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;
}

/* Add Animation */
.modal-content,
#caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.8s;
animation-name: zoom;
animation-duration: 0.8s;
}
@-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.close {
display: block;
position: absolute;
right: 5%;
top: -2%;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}

/* Overlay 8*/
.content {
position: relative;
width: 100%;
max-width: 100%;
margin: auto;
overflow: hidden;
}
.content .image-overlay {
background: rgba(114, 208, 223, 0.8);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 8%;
bottom: 0;
right: 0;
opacity: 0;
cursor: pointer;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery" id="gallery">
<div class="gallery-container">
<div class="gallery-column1">
<div class="content img1">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon" aria-hidden="true"></i>
</div>
<img id="myImg" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery1.png">
</div>
<div id="myModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img01">
</div>
<div class="content img4">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon2" aria-hidden="true"></i>
</div>
<img id="myImg4" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery4.png">
</div>
</div>
<div class="gallery-column2">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon3" aria-hidden="true"></i>
</div>
<img id="myImg2" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery2.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon4" aria-hidden="true"></i>
</div>
<img id="myImg5" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery5.png">
</div>
</div>
<div class="gallery-column3">
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon5" aria-hidden="true"></i>
</div>
<img id="myImg3" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery3.png">
</div>
<div class="content">
<div class="image-overlay">
<i class="fa fa-search-plus gallery-icon6" aria-hidden="true"></i>
</div>
<img id="myImg6" src="http://elkatesthosting-com.stackstaging.com/mountains/images/gallery6.png">
</div>
</div>
</div>
</div>