jQuery - 将点击的 HTML 元素的属性放入图像的 src答案

【问题标题】：jQuery - putting the attribute of a clicked HTML-Element into a src of an imagejQuery - 将点击的 HTML 元素的属性放入图像的 src
【发布时间】：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" alt="" class="gallery-item"></a>
      <a href="palette2.png"><img src="palette2.png" alt="" class="gallery-item"></a>
      <a href="palette3.png"><img src="palette3.png" alt="" class="gallery-item"></a>
      <a href="palette4.png"><img src="palette4.png" alt="" 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 我想了解为什么它不起作用，而不仅仅是一个解决方案。

标签： html jquery dom events attributes

【解决方案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" alt="" class="gallery-item"></a>
  <a href="palette2.png"><img src="https://via.placeholder.com/150?text=2" alt="" class="gallery-item"></a>
  <a href="palette3.png"><img src="https://via.placeholder.com/150?text=3" alt="" class="gallery-item"></a>
  <a href="palette4.png"><img src="https://via.placeholder.com/150?text=4" alt="" class="gallery-item"></a>
</div>

【讨论】：