jQuery - 将单击的 HTML 元素的属性放入图像的 src

Question

我有一个 HTML 站点，其中包含一些带有链接的图片。 当点击图片/链接时，我希望图片在同一页面上打开而不遵循链接。 我还希望页面的其余部分被黑色覆盖。

我的想法是添加 a 和 an 以及指向 HTML 正文的 cliked 链接的 src。

但是当我尝试获取 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 + ">");
  });

Answer 1

但是当我尝试获取 src 属性时，它总是“未定义”。 有人可以解释我如何解决它。

您将 click 事件附加到.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>

jQuery - 将单击的 HTML 元素的属性放入图像的 src

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-10-06 11:16:21

jQuery - 将单击的 HTML 元素的属性放入图像的 src

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-10-06 11:16:21

解决方案1
0 已采纳 2020-10-06 11:16:21