Question

我试图在click事件上交换Image标记的src，该图像src是png文件，但是如果单击Image，则源将更改为给定文件。

        <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用gif交换img png源

1 个答案: