JavaScript/Jquery将img png源代码与gif进行交换

Question

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

Answer 1

问题是您将id视为class。您为图像提供了sidebar-collapse img-logo-main-page的id，但正试图用#img-logo-main-page引用它。一个元素只能有一个id，但可以有多个类。如果你给它一个sidebar-collapse img-logo-main-page的class name，你可以用.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>