Javascript 如何拥有<；图片>；每个图像上有不同链接的元素？

很久以前，我用一个引导转盘实现了一个头部：你知道，类似这样的东西：

<div class="carousel">
    <div class="item"><img src="pic1.jpg"></div>
    <div class="item"><a href="example.com"><img src="pic2.jpg"></a></div>
</div>

currentSrc

具有浏览器当前根据屏幕大小显示的图像的URL。因此，我从该URL获取

target

参数，并使用它获取相应的链接，然后执行它

---

这一切都很管用，但我觉得对我的口味来说太粗糙了。我对

元素不是很有经验，所以我的问题是：这可以用更好的方式解决吗？

这个问题属于这里：对不起，我没有意识到，我已经在那里问过这个问题了。谢谢

<div class="item">
    <picture>
        <source media="(max-width: 576px)" srcset="pic1-small.jpg">
        <img src="pic1.jpg">
     </picture>
</div>

<div class="item">
    <picture>
        <source media="(max-width: 576px)" srcset="pic2-small.jpg">
        <img src="pic2.jpg">
     </picture>
</div>

<div class="item">
    <a href="example.com">
        <picture>
            <source media="(max-width: 576px)" srcset="pic2-small.jpg">
            <img src="pic2.jpg">
         </picture>
    </a>
</div>

<div class="item" onclick="header_onclick(this)">
    <picture>
        <source media="(max-width: 576px)" srcset="pic2-small.jpg?target=pic2-small-link">
        <img src="pic2.jpg">
     </picture>
     <a id="pic2-small-link" href="example.com" style="display: none"></a>
</div>

<script>
function header_onclick(carousel_item)
{
    var current_src = carousel_item.querySelector("img").currentSrc;                
    if (typeof current_src === "undefined") {
        return;
    }

    var src_parts = current_src.split("?target=");                
    if (src_parts.length < 2) {
        return;
    }
            
    var link = document.getElementById(src_parts[1]);                
    if (link) {
        link.click();
    }
}
</script>

var current_src = carousel_item.querySelector("img").currentSrc;