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

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

使用$ .prop函数访问source属性并对其进行更改。如果将图像与click事件绑定，则src = $(this).prop("src")将返回源。
您必须在弹出窗口中将源设置为图像，$("idToImageInPopup").prop("src", src)。

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

Answer 2

您可以尝试以下代码，当您单击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>

在点击jquery上更改img src

2 个答案: