代码之家 › 专栏 › 技术社区 › Paul

如何获取点击图片的img src

html jquery javascript

Paul · 技术社区 · 7 年前

我正在尝试获取正在单击的特定图像的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>

3 回复 | 直到 7 年前

Maksym Petrenko 7 年前

你的 this 参考dom节点 <div class="projectCont"> 使用A

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

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

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

Markus 7 年前

//Project Container Zoom
	$('#projectGallery').on('click', '.projectCont img', function (event) {
		event.stopPropagation();
		$('#zoomPop').fadeIn(350);
		$('body').css('overflow', 'hidden');
		var currentImg = $(this).attr('src');
		console.log(currentImg);
$('#zoomInner img').attr('src', 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>

Paula Licausi 7 年前

你想把这个改成IMG的身份吗?

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