JavaScript / Jquery 将 img png 源与 gif 交换

Question

我正在尝试在单击事件中交换图像标签的源代码，图像源代码是一个 png 文件，但是如果我单击该图像，源将更改为给定文件。

        <img src="images/eye.png" alt="Logo"
             id="sidebar-collapse img-logo-main-page"
             width="80">

这是 JavaScript，我在控制台中得到了控制台输出，但没有任何变化：

const gifEgg = {

    elements: {
        logo: $('#img-logo-main-page'),
        logoOverlay: $('#sidebar-image-collapse')
    },

    addGif () {
        this.elements.logoOverlay.click(() => {
            console.log("clicked");
            this.elements.logo.attr('src', '../images/eyes_move.gif');
        });
    }

};

gifEgg.addGif();

Answer 1

问题是您将 id 视为 class。您给图像 id 的 sidebar-collapse img-logo-main-page，但试图用 #img-logo-main-page 引用它。一个元素只能有一个个id，但可以有多个类。如果你给它一个 class name 的 sidebar-collapse img-logo-main-page，你可以用 .img-logo-main-page 引用它（它的类中的任何一个或多个），但是 id 必须是唯一的，每个元素只能有一个id。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://images.pexels.com/photos/658687/pexels-photo-658687.jpeg?auto=compress&cs=tinysrgb&h=350" alt="Logo"
                 id="img-logo-main-page"
                 width="80">
               <button id="sidebar-image-collapse">
               Change Image Source
               </button>
    <script>
    const gifEgg = {

        elements: {
            logo: $('#img-logo-main-page'),
            logoOverlay: $('#sidebar-image-collapse')
        },

        addGif () {
            this.elements.logoOverlay.click(() => {
                console.log("clicked");
                this.elements.logo.prop('src', 'http://2.bp.blogspot.com/-3jbHdEj7o2k/Uk6zNIfJkqI/AAAAAAAAB5s/zf7UzbSkp80/s200/zrikh+ajig.gif');
            });
        }

    };

    gifEgg.addGif();
    </script>

JavaScript / Jquery 将 img png 源与 gif 交换

JavaScript / Jquery exchange img png source with gif

javascript

jquery

png

gif