我有一个程序，example.html做以下事情:
<body>
...
<!-- Light mode and dark mode -->
<div>
<nav>
<img src="images/dark-mode.png" id="icon">
</nav>
</div>
...
</body>
这里是example.css
:root{
--primary-color: #c2aaba;
--secondary-color: linear-gradient(315deg, #d9e4f5 0%, #f5e3e6 74%);
}
.dark-theme{
--primary-color: #181818;
--secondary-color: linear-gradient(90deg, rgba(168,120,132,1) 0%, rgba(194,170,186,1) 54%, rgba(241,241,241,1) 100%);;
}
#icon {
position: absolute;
cursor: pointer;
top: 10px;
right: 20px;
width: 30px;
}
body {
font-family: 'Inconsolata', sans-serif;
color: white;
background: var(--primary-color);
}
我的example.js文件看起来像:
$(function() {
///
var icon = document.getElementById("icon");
$(#icon).on("click", function() {
document.body.classList.toggle("dark-theme");
});
});
我在本页的其他部分使用jQuery，但是，我不确定代码有什么问题。
dark-mode.png是一个图标，当点击时，会相应地改变页面上的颜色。但是，我的程序现在什么也不做。
这是正确的工作代码:
$(function() {
$("#icon").on("click", function() {
document.body.classList.toggle("dark-theme");
});
});
基本上你犯的唯一错误是你在指定选择器
时没有使用引号