JavaScript / Jquery 用 gif 交换 img png 源答案

【问题标题】：JavaScript / Jquery exchange img png source with gifJavaScript / Jquery 用 gif 交换 img png 源
【发布时间】：2019-01-11 09:54:01
【问题描述】：

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

【问题讨论】：

你确定它是正确的“../images/eyes_move.gif”而不是“images/eyes_move.gif”吗？
是的，即使如此，它不应该返回错误消息或至少一个警告，所以你说该功能应该工作吗？

标签： javascript jquery png gif

【解决方案1】：

问题是您将id 视为class。您为图像提供了sidebar-collapse img-logo-main-page 的id，但正尝试使用#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>

【讨论】：