jQuery使图像可点击(将它们包装在a href中)

Question

有没有办法让每个图像(具有特定类(都可以点击？

我想让jQuery：

1. 读取图像的src
2. 使用包含该src url的a href包装图像

.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

我希望你想要这样的东西：

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

如果我错了就告诉我。

Answer 4

试试这个：

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

Answer 5

你能简要介绍一下场景，而不明白你的意思吗？

明白你的意思：-您可以使用以下内容来包装所有具有类可点击的、带有和href的图像作为图像src-

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