javascript - 没有点击的第一张图片

Question

我的图库有问题。当我单击缩略图时，它会工作并显示大图像，但我想让第一张图像显示而不必单击其缩略图。 我怎么解决这个问题？ 下面是我的代码。

这是我的 Django 模板:

<div class="row">
    {% if offer_images1 %}
        <div class="col-md-6 col-sm-6 col-xs-12" id="help">
            {% for image in offer_images1 %}
                <img id="imageHere" class="zoom_01 img-responsive" data-zoom-image="{{ image.paint.url }}" />
            {% endfor %}
        </div>

        <div class="col-md-6 col-sm-6 col-xs-12">
            <i><b>{% trans "Title" %}: </b>{{ offer_gallery.title }}</i><br>
            <i><b>{% trans "Status" %}: </b>{{ offer_gallery.status }}</i><br>
        </div>

                {% for image in offer_images1 %}
                    <div class="col-md-3 hover08 column">
                        <div style="padding-top:20px;padding-bottom:20px;">
                            <figure class="img1">
                                <img class="thumb img-responsive" src="{{ image.paint.url }}" width="150" height="150" style="border:1px solid grey">
                            </figure>
                        </div>
                    </div>
                    {% if forloop.counter|divisibleby:"4" and not forloop.last %}
                        </div><div class="row">
                    {% endif %}
                {% endfor %}

    {% endif %}
</div>

这是我的 jQuery 代码:

<script>
    $(document).ready(function () {
        $( ".thumb" ).each(function(index) {
            $(this).on("click", function(){
                var image = $(this).attr("src")
                $("#imageHere").attr('src', image);
            });
        });
    });
</script>

Answer 1

自己在第一张图片上触发 click 事件。

<script>
    $(document).ready(function () {

        $(".thumb").on("click", function(){
            $("#imageHere").attr('src', $(this).attr("src"));
        });

        // ======= HERE =======
        $( ".thumb:first" ).click();

    });
</script>