单击jquery更改img src

我有一个图片库，当我点击其中一个图片库项目时会弹出一个窗口，每个项目都有一个不同的图片src。我想让这个画廊动态，所以当用户点击一个项目时，相应项目的图像应该显示在弹出窗口中。我希望这听起来不会让人困惑，这里有一张图片来说明我想说的：

以及HTML：

<div class="gallery__flex">
        <div class="gallery__item">
          <img src="img/gallery-1.jpeg" alt="" class="gallery__img">
        </div>
        <div class="gallery__item">
          <img src="img/gallery-2.jpeg" alt="" class="gallery__img">
        </div>
        <div class="gallery__item">
          <img src="img/gallery-3.jpeg" alt="" class="gallery__img">
        </div>
        <div class="gallery__item">
          <img src="img/gallery-4.jpeg" alt="" class="gallery__img">
        </div>
      </div>
      <div class="gallery__flex">
        <div class="gallery__item">
          <img src="img/gallery-5.jpeg" alt="" class="gallery__img">
        </div>
        <div class="gallery__item">
          <img src="img/gallery-6.jpeg" alt="" class="gallery__img">
        </div>
        <div class="gallery__item">
          <img src="img/gallery-7.jpeg" alt="" class="gallery__img">
        </div>
        <div class="gallery__item">
          <img src="img/gallery-8.jpeg" alt="" class="gallery__img">
        </div>

  <!-- popup window -->

    <div class="popup">
      <img src="img/gallery-1.jpeg" alt="" class="popup__img">
      <span class="popup__close-icon" id="closeIcon">&times;</span>
    </div>

&时代；

如何使用Jquery实现这一点？

我举了一个例子：

使用$.prop函数访问源属性并对其进行更改。 如果使用单击事件绑定图像，则

src=$（this）.prop（“src”）

将返回源代码。
您必须在弹出窗口中将源设置为

$（“idToImageInPopup”）.prop（“src”，src）

---

您可以尝试以下代码，当您点击img时，它会显示img的弹出窗口

$（文档）.ready（函数（）{
$（“.gallery\u item>img”）。单击（函数（）{
var img=$（this.attr（'src'）；
$（“.popup>img.popup\uu img”）.attr（'src'，img）；
$（“.popup”）.show（）；
});
$（“#关闭图标”）。单击（函数（）{
$（“.popup”）.hide（）；
});
});
.gallery\uu img{
宽度：80px；
高度：80px；
浮动：左；
}
.弹出窗口{
边缘顶部：10px；
宽度：100%；
浮动：左；
边框：1px实心#ccc；
填充：10px；
框大小：边框框；
位置：相对位置；
显示：无；
}
.popup\u img{
宽度：80px；
高度：80px；
左：0；
右：0；
排名：0；
显示：块；
保证金：自动；
}
#闭合图标{
位置：绝对位置；
右：0；
排名：0；
z指数：1；
字号：18px；
背景：rgba（0,0,0,0.4）；
颜色：#fff；
填充：2px；
框大小：边框框；
o
}

&时代；
感谢您回复@Dknacht，这是我正在使用的代码，但它不起作用：
//弹出打开$（'.gallery_uuuitem'）。单击（function（）{$（'.Popup'）.css（{'opacity'：'1'，'visibility'：'visibility'}）；$（'body'）.css（'overflow'，'hidden'）；$（.Popup”）.prop.prop（“src”）}）
替换
$（'.gallery\uuu item'）。单击（
替换
$（'.gallery\uuu item>img'）。单击（
将单击事件附加到图像，而不是包含图像的div）。发生的情况是（在代码中）将单击事件附加到
元素。div没有“src”属性，因此代码不起作用。by
$(“.gallery\uu item>img”）
您将单击事件附加到div内的图像，而不是div本身。非常感谢，这工作非常完美。现在您是否介意解释这段代码的实际功能
$（“.gallery\uu item>img”）
发生的是您（在您的代码中）正在将单击事件附加到
元素。div没有“src”属性，因此您的代码不起作用。通过
$（“.gallery\uu item>img”）
将单击事件附加到div内的图像，而不是div本身。哦，我明白了，这是有意义的。非常感谢您向我解释这一点。
$("img").click(function (){
  $("#imageDialog").prop("src", $(this).prop("src"))
  $("#dialog").dialog("open")
});