javascript - 如何获取点击图像的img src

Question

我正在尝试获取所单击的特定图像的 img src。我在尝试中使用了 this 函数，所以我不确定我做错了什么。

有人看到这个问题吗？

HTML:

<div id="zoomPop" data-popup="pop2">
    <div id="zoomInner">
        <a class="sharePopClose" data-popup-close="pop2" href="#"><img src="/icon_close.png" alt="Close Project Image" class="xClose">
        </a>
        <img src="" alt="Project Enlarge" id="zoomImg">
    </div>
</div>

//Project Container Zoom
	$('#projectGallery').on('click', '.projectCont', function (event) {
		event.stopPropagation();
		$('#zoomPop').fadeIn(350);
		$('body').css('overflow', 'hidden');
		var currentImg = $(this).attr('src');
		console.log(currentImg);
	});

#zoomPop {
	width: 100%;
	height: 100%;
	color: #FFF;
	position: fixed;
	z-index: 999999;
	margin: 0;
	padding: 0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow-y: scroll;
	display: none;
}
#zoomPop {
	background: rgba(0,0,0,.7);
}
#zoomInner {
	position: relative;
	padding: 60px 0;
	margin: 0 auto;
	width: 90%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="projectGallery">
  <div class="projectCont">
    <img src="https://images.pexels.com/photos/2422/sky-earth-galaxy-universe.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Pic">
  </div>
  <div class="projectCont">
    <img src="https://geology.com/google-earth/google-earth.jpg" alt="Pic">
  </div>
</div>
<div id="zoomPop" data-popup="pop2">
  <div id="zoomInner">
    <img src="" alt="Project Enlarge" id="zoomImg">
  </div>
</div>

Answer 1

您的this引用DOM节点<div class="projectCont"> 使用

console.log($(this).find('img').attr('src'));

或将事件处理程序的选择器更改为

$('#projectGallery').on('click', '.projectCont img', function (event) {