我想在两个不同主题(例如,白天模式和夜间模式)之间单击时循环显示背景图像和背景颜色.我正在使用下面的代码,该代码有效,但是存在两个问题：

>该功能仅在第二次单击时更改背景.第一次单击链接不会更改背景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”>页面呈现时

现在,只需将类名从白天更改为夜间,就可以同时切换图像和颜色：

<script>
$(document).ready(function() {
    $('#theLink').click(function() {
        $('body').toggleClass('daytime nighttime');
        return false;
    });
});
</script>

对.toggleClass()的调用将删除元素上存在的所有类(白天将在第一次单击时存在),并添加任何不存在的类(将添加夜间).