时间戳

首页 > 解决方案 > jQuery - 将点击的 HTML 元素的属性放入图像的 src

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

问题描述

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

我的想法是在 HTML 正文的单击链接的 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 + ">");
  });

标签： htmljquerydomeventsattributes

解决方案

但是当我尝试获取 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>

推荐阅读