点击 jquery 更改 img src

Question

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

还有 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 做到这一点？

Answer 1

你可以试试下面的代码，当你点击img它会弹出img

$(document).ready(function(){
  
  
  $(".gallery__item>img").click(function(){
    var img = $(this).attr('src');
    $(".popup>img.popup__img").attr('src',img);
    $(".popup").show();
  });
  $("#closeIcon").click(function(){
    $(".popup").hide();
  });
  

});

.gallery__img{
  width:80px;
  height:80px;
  float:left;
}

.popup{
margin-top:10px;
width:100%;
float:left;
border:1px solid #ccc;
padding:10px;
box-sizing:border-box;
position:relative;
display:none;
}
.popup__img{
  width:80px;
  height:80px;
  left:0;
  right:0;
  top:0;
  display:block;
  margin:auto;
}
#closeIcon{
position:absolute;
right:0;
top:0;
z-index:1;
font-size:18px;
background:rgba(0,0,0,0.4);
color:#fff;
padding:2px;
box-sizing:border-box;
o
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="gallery__flex">
        <div class="gallery__item">
          <img src="https://cdn2.tgdd.vn/Products/Images/42/166247/samsung-galaxy-a8-star-2018-600x600.jpg" alt="" class="gallery__img">
        </div>
        <div class="gallery__item">
          <img src="https://cdn1.tgdd.vn/Products/Images/42/155261/oppo-f7-bac-600x600.jpg" alt="" class="gallery__img">
        </div>
        <div class="gallery__item">
          <img src="https://cdn3.tgdd.vn/Products/Images/42/84798/samsung-galaxy-j7-prime-hh-600x600.jpg" alt="" class="gallery__img">
        </div>
        <div class="gallery__item">
          <img src="https://cdn.tgdd.vn/Products/Images/42/154260/huawei-nova-3e-2-600x600.jpg" alt="" class="gallery__img">
        </div>
      </div>
      <div class="gallery__flex">
        <div class="gallery__item">
          <img src="https://cdn2.tgdd.vn/Products/Images/42/177047/samsung-galaxy-s9-tim-1-600x600.jpg" alt="" class="gallery__img">
        </div>
       </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>

Answer 2

我举了一个例子： https://codepen.io/dknacht/pen/dKaONp

使用 $.prop 函数访问源属性并更改它。 如果你用点击事件绑定图片，那么src = $(this).prop("src")会返回源。
您必须在弹出窗口中将图像的来源设置为$("idToImageInPopup").prop("src", src)。

$("img").click(function (){
  $("#imageDialog").prop("src", $(this).prop("src"))
  $("#dialog").dialog("open")
});