如何将img元素的src属性切换回jquery？

Question

我创建了一个脚本，当您单击按钮时会更改图像。 问题在于再次单击，因为 src 属性保持不变。 我想在再次点击图片的来源后将 go 回到最初的 src。 我尝试使用切换方法来做到这一点，但效果很好。

我的代码：

$(document).ready(function(){
    $('#button').click(function(){
        $('.logo').attr('src', 'http://domena.com/logo-1.jpg');
    });
});

我试图以这种方式解决它，但我失败了。

$(document).ready(function(){
    $('#button').click(function(){
        $('.logo').toggle(
                function() {
                    $(this).attr('src', 'http://domena.com/logo-1.jpg');
                },
                function(){
                    $(this).attr('src', 'http://domena.com/logo-2.jpg');
                }
            );
    });
});

Answer 1

您可以在<img>的属性中传递新image的URL ，然后您可以获得当前image ，即src和下一个图像（ data-new ）并交换它们的值，如下所示 -

 $(document).ready(function(){ $('#button').click(function(){ let curr_img = $('.logo').attr('src'); // get current image let new_img = $('.logo').attr('data-new'); // get new image to be shown $('.logo').attr({'src': new_img, 'data-new': curr_img}); // interchange their values }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <:-- give next values as an attribute ie data-new here--> <img src="https.//w7.pngwing.com/pngs/247/564/png-transparent-computer-icons-user-profile-user-avatar-blue-heroes-electric-blue:png" class="logo" data-new="https.//image.flaticon.com/icons/svg/21/21104:svg" style="width; 150px: height; 150px;"> <br> <button id="button">Toggle image</button>

希望它可以帮助你。