Jquery根据单击的div的id更改图像源

发布于 2024-12-18 22:45:00 字数 1158 浏览 2 评论 0原文

我想要点击拇指来显示带有预加载器的更大图像，然后在加载完成时淡入。

感谢这个答案 - 根据点击的拇指来加载不同的图像 - 和本指南整理了加载位。

将两者结合起来，我有以下脚本：

 <script type="text/javascript">
    <!--
    $(function () {
        $('img[id^="thumb"]').click(function () {
        $('#loader').show();
        var id = $(this).attr('id').replace('thumb', '');
        var img = new Image();
        $(img).load(function () {
            //$(this).css('display', 'none');
            $(this).hide();
            $('#loader').removeClass('loading').append(this);
            $(this).fadeIn();
        }).attr('src', 'photos/1.jpg');
    }); });

    //-->
    </script>

最后您会注意到 .attr 源固定在一张图像上。我想要的是'.jpg'之前的数字根据拇指的id而变化（它们被标记为：'thumb1'，'thumb2'等）

有什么方法可以做到这一点吗？非常感谢！

附注这个答案似乎很接近，但我遇到的问题是拇指 ID在脚本中似乎还为时过早，无法使用如此简单的解决方案。

原文

I want a click on a thumb to reveal a larger image with a pre-loader and then a fade-in when loading is complete.

I am almost there thanks to this answer - which enables different images to load depending on what thumb is clicked - and this guide which sorts out the loading bit.

Combining the two I have the following script:

 <script type="text/javascript">
    <!--
    $(function () {
        $('img[id^="thumb"]').click(function () {
        $('#loader').show();
        var id = $(this).attr('id').replace('thumb', '');
        var img = new Image();
        $(img).load(function () {
            //$(this).css('display', 'none');
            $(this).hide();
            $('#loader').removeClass('loading').append(this);
            $(this).fadeIn();
        }).attr('src', 'photos/1.jpg');
    }); });

    //-->
    </script>

You will notice at the end that the .attr source is fixed on one image. What I want is that the number before the '.jpg' changes depending on the id of the thumb (they are labelled: 'thumb1', 'thumb2' etc.)

Is there any way of doing this? Much thanks!

ps
This answer seems to be close but the problem I have is that the thumb id seems to be too early on in script to be able to use such simple solutions.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

稚然 2024-12-25 22:45:00

<script type="text/javascript">

    $(function () {
        $('img[id^="thumb"]').click(function () {
        var thumbId = $(this).attr('id').substring(5); // assuming the id of the thumb is like "thumb1", "thumb2", ...
        $('#loader').show();
        var id = $(this).attr('id').replace('thumb', '');
        var img = new Image();
        $(img).load(function () {
            //$(this).css('display', 'none');
            $(this).hide();
            $('#loader').removeClass('loading').append(this);
            $(this).fadeIn();
        }).attr('src', 'photos/' + thumbId + '.jpg');
    }); });


    </script>

<script type="text/javascript">

    $(function () {
        $('img[id^="thumb"]').click(function () {
        var thumbId = $(this).attr('id').substring(5); // assuming the id of the thumb is like "thumb1", "thumb2", ...
        $('#loader').show();
        var id = $(this).attr('id').replace('thumb', '');
        var img = new Image();
        $(img).load(function () {
            //$(this).css('display', 'none');
            $(this).hide();
            $('#loader').removeClass('loading').append(this);
            $(this).fadeIn();
        }).attr('src', 'photos/' + thumbId + '.jpg');
    }); });


    </script>

回复收藏 0 原文

~没有更多了~