html - 自动将图像加载到来自不同的href

Question

所以我有两个div。代码如下。

<div class="picture">

</div><!-- end picture -->

<div class="gallery">
    <a href="link-to-image01.jpg"><img src="mythumnail01.jpg" /></a>
    <a href="link-to-image02.jpg"><img src="mythumnail02.jpg" /></a>
    <a href="link-to-image03.jpg"><img src="mythumnail03.jpg" /></a>
</div><!-- end gallery -->

当页面加载时，我希望“div.gallery”中的第一个“href”显示在“div.picture”中。

图库是可管理的，因此“.gallery”中的缩略图可能最终会发生变化。这就是为什么我想查看“div.gallery”中的第一个“href”并将其显示在“div.picture”中。

这样的事情可能吗？我现在有一些代码在点击事件时将“div.gallery”的“href”加载到其中。但不知道如何在不点击的情况下自动完成。代码如下。

<script>
    $(document).ready(function () {
        $("div.gallery a").click(function (event) {
            event.preventDefault();
            $("div.picture").html($("<img>").attr("src", this.href).fadeIn(1000));
        });
    });
</script>

提前致谢。

Answer 1

<a>您可以尝试使用 JQuery访问第一个：

$(document).ready(function () {
    var href = $('div.gallery a').get(0).href;
    $('div.picture').html($('<img>').attr('src', href).fadeIn(1000));
})