我想做一些有趣的事情，例如，我在我的网站上有一个图像，当一个按钮被触发时，我想更改它，但当按钮再次被点击（或添加相同的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">
资产
images/card-dark.png
images/card-light.png
在文档加载时，将图像源存储在变量中。在我们的示例中，它被称为prev。
在toggle函数内部，我们检查图像的源是否与加载时的源相等。如果是的话，我们将源转换为另一个图像。当源被更改并且我们再次调用toggle函数时，我们知道源与前一个不同，因此我们将其还原回原始源。
null
$(document).ready(function() {
var img = $('#img');
var prev = img[0].src;
function toggle(img) {
let src = img.src;
if (src == prev) {
img.src = "https://pbs.twimg.com/profile_images/453956388851445761/8BKnRUXg_400x400.png";
img.height="48";
} else {
img.src = prev;
}
}
$('button').on('click', function() {
toggle(img[0]);
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" height="48"></script>
<img id="img" src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1">
<button>Toggle</button>