Javascript 带有覆盖层的jquery图像库，可以'；由于覆盖，单击时无法获取正确的url

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

$（文档）.ready（函数（）{
$（“.image overlay”）。单击（函数（）{
var url=$（'.content img'）.attr（'src'）；
$（“.modal”）.css（“显示”、“块”）；
$（“.close”）.css（“显示”、“块”）；
$（'img01'）.attr（'src'，url）；
});
});
$（文档）.ready（函数（）{
$（“.image overlay”）.mouseover（函数（）{
$（this.css（“不透明度”、“1”）；
});
$（“.image overlay”）.mouseout（函数（）{
$（this.css（“不透明度”，“0”）；
});
});
$（文档）.ready（函数（）{
$（“.close”）。单击（函数（）{
$（“.modal”）.css（“显示”、“无”）；
});
});
.gallery{
框大小：边框框；
利润率最高：5%；
填充：0.5%；
}
.画廊容器{
显示：-ms flexbox；
显示器：flex；
-ms-flex-wrap:wrap；
柔性包装：包装；
证明内容：中心；
}
.画廊-专栏1{
-ms-flex:18%；
/*IE10*/
弹性：18%；
最大宽度：18%；
填充：0.8em；
}
.画廊-2{
-ms-flex:24.7%；
/*IE10*/
弹性：24.7%；
最大宽度：24.7%；
填充：0.8em；
}
.图库-3{
-ms-flex:31.2%；
/*IE10*/
弹性：31.2%；
最大宽度：31.2%；
填充：0.8em；
}
@媒体屏幕和屏幕（最大宽度：700px）{
.画廊-专栏1，
.画廊-专栏2，
.图库-3{
-ms-flex:100%；
弹性：100%；
最大宽度：100%；
}
}
.gallery-column1 img{
边缘顶部：1.5em；
垂直对齐：中间对齐；
宽度：100%；
}
.图库-专栏2 img{
边缘顶部：1.5em；
垂直对齐：中间对齐；
宽度：100%；
}
.图库-专栏3 img{
边缘顶部：1.5em；
垂直对齐：中间对齐；
宽度：100%；
}
.莫代尔{
显示：无；
/*默认情况下隐藏*/
位置：固定；
/*原地不动*/
z指数：1；
/*坐在上面*/
填充：1%；
/*盒子的位置*/
最高：20%；
宽度：320px；
/*全宽*/
高度：自动；
/*全高*/
溢出：自动；
/*如果需要，启用滚动*/
左：50%；
转换：转换（-50%，0）；
背景色：rgb（0,0,0）；
/*退色*/
背景色：rgba（0,0,0,0.9）；
/*黑色w/不透明度*/
}
/*模态内容（图像）*/
.模态内容{
保证金：自动；
显示：块；
宽度：80%；
最大宽度：700px；
}
/*添加动画*/
.模态内容，
#标题{
-webkit动画名称：缩放；
-webkit动画持续时间：0.8s；
动画名称：缩放；
动画持续时间：0.8s；
}
@-webkit关键帧缩放{
从{
-webkit变换：缩放（0）
}
到{
-webkit转换：缩放（1）
}
}
@关键帧缩放{
从{
变换：缩放（0）
}
到{
变换：缩放（1）
}
}
.结束{
显示：块；
位置：绝对位置；
右：5%；
前-2%；
颜色：#f1f1；
字体大小：40px；
字体大小：粗体；
过渡：0.3s；
}
.关闭：悬停，
.结束：聚焦{
颜色：#bbb；
文字装饰：无；
光标：指针；
}
/*覆盖层8*/
.内容{
位置：相对位置；
宽度：100%；
最大宽度：100%；
保证金：自动；
溢出：隐藏；
}
.内容.图像覆盖{
背景：rgba（114208223,0.8）；
位置：绝对位置；
身高：100%；
宽度：100%；
左：0；
最高：8%；
底部：0；
右：0；
不透明度：0；
光标：指针；
-webkit过渡：所有0.4s都易于输入输出0；
-moz转换：所有0.4都可以轻松地输入输出0；
过渡：所有0.4s均为0进0出；
}

&时代；
我在你的js中更改了以下行

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

到

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


/*var myVar=document.querySelectorAll（'.content img'）；
var mySrc=“”；
对于（变量i=0；i
.gallery{
框大小：边框框；
利润率最高：5%；
填充：0.5%；
}
.画廊容器{
显示：-ms flexbox；
显示器：flex；
-ms-flex-wrap:wrap；
柔性包装：包装；
证明内容：中心；
}
.画廊-专栏1{
-ms-flex:18%；
/*IE10*/
弹性：18%；
最大宽度：18%；
填充：0.8em；
}
.画廊-2{
-ms-flex:24.7%；
/*IE10*/
弹性：24.7%；
最大宽度：24.7%；
填充：0.8em；
}
.图库-3{
-ms-flex:31.2%；
/*IE10*/
弹性：31.2%；
最大宽度：31.2%；
填充：0.8em；
}
@媒体屏幕和屏幕（最大宽度：700px）{
.画廊-专栏1，
.画廊-专栏2，
.图库-3{
-ms-flex:100%；
弹性：100%；
最大宽度：100%；
}
}
.gallery-column1 img{
边缘顶部：1.5em；
垂直对齐：中间对齐；
宽度：100%；
}
.图库-专栏2 img{
边缘顶部：1.5em；
垂直对齐：中间对齐；
宽度：100%；
}
.图库-专栏3 img{
边缘顶部：1.5em；
垂直对齐：中间对齐；
宽度：100%；
}
.莫代尔{
显示：无；
/*默认情况下隐藏*/
位置：固定；
/*原地不动*/
z指数：1；
/*坐在上面*/
填充：1%；
/*盒子的位置*/
最高：20%；
宽度：320px；
/*全宽*/
高度：自动；
/*全高*/
溢出：自动；
var url = $(this).siblings('img').attr('src');

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

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