jQuery - помещение атрибута нажатого HTML-элемента в src изображения

#html #jquery #dom #events #attributes

#HTML #jquery #dom #Мероприятия #атрибуты

Вопрос:

у меня есть HTML-сайт с несколькими изображениями с прикрепленными к ним ссылками. При нажатии на одну из картинок / ссылок я хочу, чтобы картинка открывалась на той же странице, не переходя по ссылке. Я также хочу, чтобы остальная часть страницы была перекрыта черным цветом.

Моя идея состоит в том, чтобы добавить a и an с src щелкнутой ссылки в HTML-body.

Но когда я пытаюсь получить 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   ">");
  });

1. В нем нет элемента с идентификатором test $("#test").attr("href")

2. Извините, я использовал неправильный обрезанный код. Я исправил это

3. Прежде чем привести вам пример, рассматривали ли вы возможность использования некоторых бесплатных всплывающих решений? Они уже реализовали такие вещи, как размытие, кнопка закрытия и т.д.

4. @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" 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>