jQuery, чтобы сделать изображения кликабельными (оберните их в href)

Question

Есть ли способ сделать каждое изображение (которое имеет определенный класс) кликабельным?

Я хочу jQuery:

1. Считать src изображения .
2. Оберните изображение a href, содержащим этот sr c url.

.clickable {
padding: 20px;
border: 1px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<img src="https://www.google.com/logos/doodles/2020/stay-and-play-at-home-with-popular-past-google-doodles-fischinger-2017-6753651837108768-s.png" class="clickable">

Answer 1

$(document).ready(function(){
$("img.clickable").each(function(i){
  $(this).wrap(`<a href="${($(this).attr('src'))}"></a>`)
 })
})

.clickable {
padding: 20px;
border: 1px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<img src="https://www.google.com/logos/doodles/2020/stay-and-play-at-home-with-popular-past-google-doodles-fischinger-2017-6753651837108768-s.png" class="clickable">

Answer 2

Вы можете сделать это так:

$("img.clickable").wrap("<a href='" + $('img').attr('src') + "'></a>");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://www.google.com/logos/doodles/2020/stay-and-play-at-home-with-popular-past-google-doodles-fischinger-2017-6753651837108768-s.png" class="clickable">

Answer 3

попробуйте это:

var url=$(".clickable").attr("src");
$("a").attr("href", url);

Answer 4

Можете ли вы проинформировать сценарий, не получив свою точку зрения?

получил свою точку зрения: - Вы можете использовать следующее, чтобы обернуть все изображения, имеющие класс, кликабельный с и и с href как изображение sr c

$('.clickable').each(function(){
    src = $this.attr('src');
    $this.wrap("<a href='" + src  + "'></a>");
})

Answer 5

Я надеюсь, что вы хотите что-то вроде этого:

$('.clickable').on('click', function() {....})

дайте мне знать, если я ошибаюсь.