如何將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>

希望它可以幫助你。