Question

我想在两个不同主题之间点击背景图像和背景颜色（例如白天模式和夜间模式）。我正在使用以下代码，它有效，但有两个问题：

该功能仅在第二次点击时更改背景。首次点击链接不会改变背景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位于左上角）看到它的实际效果。

Answer 1

我会采用稍微不同的方法来解决首次点击问题并让您永久循环颜色。

在页面模板中添加以下内容：

<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上）并添加任何不存在的类（{{1} }将被添加）。

Answer 2

我看了一下你网站上的代码..你是正确的，你会有两个重复值的大数组 - 这不是编写好代码的方法（对不起）。我会推荐类似于Ryan953所建议的东西，但似乎你希望在不向CSS文件添加类的情况下完成此操作。所以这里有一个工作的例子，我会做什么，它允许许多背景图像..

<html>
<head>
    <title>background image and color cycle</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">

        var allImages = [
                "http://ewb.atworq.com/permagoo/theworks/dreaming2012/images/bg-clouds.png", 
                "http://ewb.atworq.com/permagoo/theworks/dreaming2012/images/bg-cloudsNight.png",
                "http://degnedyrlaegen.dk/picts/background-header.jpg"
            ];

        var allColors = [ "#b7d9ef", "#011157", "#a1e35b" ];

        var current = 0;

        $(document).ready(function() {
            $("#theLink").click(function() {
                $("body").css("background-image", "url(" + allImages[current] + ")").css("background-repeat","repeat-x");
                $("body").css("background-color", "" + allColors[current] + "");
                current = (current++ < allImages.length - 1) ? current : 0 ;
            });
        });
        </script>
</head>
<body>
    <h2>background image and color cycle</h2>
    <button id="theLink">cycle background</button>
</body>
</html>

您可以将上述代码复制并粘贴到本地HTML文件中并在本地运行 - 它应该可以正常运行。：）

循环通过背景图像onClick工作 - 但仅在第二次点击时

2 个答案: