javascript - 获取 img src onclick 然后将其输入到其他函数中

Question

我正在尝试设置一个画廊，当单击较小的图像时，它将显示一个较大尺寸的隐藏 div 以及所单击的特定图像。

我想知道你如何设置一个 Jquery，在单击 div 时，它会提供 img src进入另一个img标签(带有变量或其他)。

我正在玩类似的东西

function getImageSrc(x) {
   var x= document.getElementsByClassName("image").src,
   return x;

然后我会将其输入另一个函数，其中 x将是 img src来自getImageSrc功能，但我就是不能完全理解它。我似乎想不出如何解雇 onClick第一个函数中的事件，而不在第一个函数中添加附加函数。

任何帮助都会很棒。如果这个方法不起作用(除了插件)，我什至会采取一个全新的方向。

这是代码片段，现在我有时间来了解它。我基本上试图将图像 src 传递到 .clicked单击图像时，.clicked将从visibility: hidden开始至visibility: visible .

下一个需要运行的脚本是当.clicked时div 可见并单击，它会返回隐藏状态。

我在弄清楚第一个脚本时遇到了困难。

.clicked {
  visibility: hidden;
  height: 100%;
  width: 100%;
  background: rgba(35,35,41,.9);
  z-index: 100;
  top:0;
  }

.imgcontainer {
  height: 200px;
  width: 200px;
  overflow: hidden;
  }


  
  

<div class="clicked">
  <img class="clickedimg" src="">
 </div>

<div class="imgcontainer">
  <img class="image" src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
 </div>

Answer 1

它非常简单，代码本身就解释了

$(document).ready(function() {
  $('.small > img').click(function() {
    $('.big > img').prop('src', $(this).prop('src'));
    $('.big').show();
  })
});

.small {
  height: 100px;
  width: 100px;
}
.small >img,
.big > img {
  height: 100%;
  width: 100%;
}
.big {
  height: 300px;
  width: 300px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="small">
  <img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg" />
</div>
<div class="big">
  <img />
</div>