Javascript 使用jQuery切换图像源

我想做一些有趣的事情，例如，我的网站上有一个图像，我想在按钮被触发时对其进行更改，但我想在再次单击按钮时将其还原为原始图像（或向其添加相同的img），并在单击事件时一直重复此操作。我怎样才能做到这一点

这是我当前的Jquery，但只适用于一次单击

    $('#menu-btn').on({
        'click': function () {
            $('#div1').attr('src', 'images/card-light.png');
        }
    });

Html代码

<button id="menu-btn">click me</button>
<img id="div1" src="./images/card-dark.png">

---

加载文档时，将图像源存储在变量中。在我们的例子中，它被称为

prev

在toggle函数中，我们检查图像的源是否与加载时的源相同。如果是，我们将源更改为另一个图像。当源代码被更改并且我们再次调用

toggle

函数时，我们知道源代码与前一个不同，因此我们将其还原为原始源代码

$（文档）.ready（函数（）{
变量img=$（“#img”）；
var-prev=img[0].src；
功能切换（img）{
设src=img.src；
如果（src==prev）{
img.src=”https://pbs.twimg.com/profile_images/453956388851445761/8BKnRUXg_400x400.png";
img.height=“48”；
}否则{
img.src=prev；
}
}
$（'button'）。在（'click'，function（）上{
切换（img[0]）；
})
})

切换

因此，当同一个按钮反复右键单击时，您需要切换图像？能否将两个图像路径都放在图像元素的数据属性中？将图像标记的id设置为“div1”已经不是一个好主意了…能否请您简化它，为什么您使用的是我以外的其他变量？为什么使用3个图像而不是2个？顺便说一句，谢谢你，也请注意，我使用的本地图像不是URL谢谢你，也是你；重新使用img元素，您能将其更改为id吗？因为我使用的是multipe Images。很好，谢谢，我希望我能接受anwser，但我不能，因为我的声誉很低，我会在得到需要批准的分数后再这样做。@asdas12没问题。很高兴提供帮助：）无法使用要替换的.json文件

images/card-dark.png
images/card-light.png