jQuery - 将点击的 HTML 元素的属性放入图像的 src
Posted
技术标签:
【中文标题】jQuery - 将点击的 HTML 元素的属性放入图像的 src【英文标题】：jQuery - putting the attribute of a clicked HTML-Element into a src of an image 【发布时间】：2021-01-21 06:15:05 【问题描述】：我有一个 html 站点，其中包含一些带有链接的图片。 当点击图片/链接之一时，我希望图片在同一页面上打开而不点击链接。我还希望页面的其余部分被黑色覆盖。
我的想法是在 HTML-body 的点击链接的 src 中添加 a 和 an。
但是当我尝试获取 src 属性时，它总是“未定义”。 谁能解释我如何解决它。
我做了一些研究，发现我可能以错误的方式使用了“this”关键字，但我真的不明白为什么。 由于我是 javascript 和 jQuery 的初学者，我真的不知道如何将其转移到我的问题上。
HTML
<html lang="de">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<title></title>
</head>
<body>
<div class="gallery">
<a href="palette1.png"><img src="palette1.png" class="gallery-item"></a>
<a href="palette2.png"><img src="palette2.png" class="gallery-item"></a>
<a href="palette3.png"><img src="palette3.png" class="gallery-item"></a>
<a href="palette4.png"><img src="palette4.png" class="gallery-item"></a>
</div>
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script type="text/javascript" src="javascript.js">
</script>
</body>
</html>
Javascript
$(".gallery-item").click(function(event)
event.preventDefault();
let overlay = $("body").append("<div id='overlay'></div>");
let link = $(this).attr("href");
$("body").append(overlay);
$("body").append("<img src=" + link + ">");
);
【问题讨论】：
$("#test").attr("href")中没有id为test的元素
对不起，我使用了错误的代码。我修好了
在给你做例子之前，你有没有考虑过使用一些免费的弹出解决方案？他们已经实现了模糊、关闭按钮等功能。
@KvizMajster 我想了解为什么它不起作用，而不仅仅是一个解决方案。
【参考方案1】：
但是当我尝试获取 src 属性时，它总是“未定义”。谁能解释我如何解决它。
您正在将点击事件附加到 .gallery-item，然后尝试读取它的 href 属性 - 但画廊项目是图像并且具有 src 属性。
$(".gallery-item").click(function(event)
event.preventDefault();
let link = $(this).attr("src");
var $overlay = $("<div id='overlay'></div>");
$($overlay).append("<img src='" + link + "'>");
$("body").append($overlay);
);#overlay
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color: black;
opacity:0.8;
#overlay img
display:block;
margin-left: auto;
margin-right: auto;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery">
<a href="palette1.png"><img src="https://via.placeholder.com/150?text=1" class="gallery-item"></a>
<a href="palette2.png"><img src="https://via.placeholder.com/150?text=2" class="gallery-item"></a>
<a href="palette3.png"><img src="https://via.placeholder.com/150?text=3" class="gallery-item"></a>
<a href="palette4.png"><img src="https://via.placeholder.com/150?text=4" class="gallery-item"></a>
</div>【讨论】：
以上是关于jQuery - 将点击的 HTML 元素的属性放入图像的 src的主要内容，如果未能解决你的问题，请参考以下文章