我想在两个不同的主题(例如白天模式和夜间模式)之间循环点击背景图像和背景颜色。我正在使用以下代码，该代码有效，但存在两个问题:
- 该函数仅在第二次点击时更改背景。第一次点击链接不会更改背景 CSS。
- 我只有两个背景图像/颜色我想在它们之间循环，但我不知道如何使代码在两者之间循环，所以我有一个很长的数组，最终会中断。
代码:
var allImages = ["bg-clouds.png", "bg-cloudsNight.png", "bg-clouds.png", "bg-cloudsNight.png", "bg-clouds.png"];
var allColors = ["#b7d9ef", "#011157", "#b7d9ef", "#011157", "#b7d9ef"];
$(document).ready(function() {
$("#theLink").click(function() {
var newImageLink = allImages.pop();
var newColor = allColors.pop();
$("body").css("background-image", "url(" + newImageLink + ")");
$("body").css("background-color", "" + newColor + "");
});
});
你能告诉我为什么这个功能只在第二次点击时有效吗？
PS:您可以在 ewb.atworq.com/permagoo/上看到它的运行情况(#theLink 在左上角)
最佳答案
我会采取稍微不同的方法来解决第一次点击问题，让您永远循环颜色。
将如下内容添加到您的页面模板中:
<style>
.daytime {
background-image: url('bg-clouds.png');
background-color: #b7d9ef;
}
.nighttime {
background-image: url('bg-cloudsNight.png');
background-color: #011157;
}
</style>
然后编辑您的模板或其他内容:<body class="daytime">当页面呈现时
现在，您只需将类名从 daytime 更改为即可切换图像和颜色。至 nighttime像这样:
<script>
$(document).ready(function() {
$('#theLink').click(function() {
$('body').toggleClass('daytime nighttime');
return false;
});
});
</script>
调用.toggleClass()将删除元素上存在的任何类( daytime 将存在于第一个 click 上)并添加任何不存在的类( nighttime 将被添加)。
关于javascript - 循环通过背景图像 onClick 工作 - 但仅在 secondClick，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12760873/