时间戳

首页 > 解决方案 > JavaScript / Jquery 用 gif 交换 img png 源

javascript - JavaScript / Jquery 用 gif 交换 img png 源

问题描述

我正在尝试在单击事件上交换图像标记的 src，图像 src 是 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();

标签： javascriptjquerypnggif

解决方案

问题是你正在处理一个id类似的class. 您给了图像 an id，sidebar-collapse img-logo-main-page但试图用 来引用它#img-logo-main-page。一个元素只能有一个id，但可以有多个类。如果你给它 a class nameof sidebar-collapse img-logo-main-page，你可以用.img-logo-main-page（它的任何一个或多个类）来引用它，但是 anid必须是唯一的并且每个元素只能有一个 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>

推荐阅读