3

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

  1. 该功能仅在第二次单击时更改背景。第一次单击链接不会更改背景 css。
  2. 我只有两个要循环的背景图像/颜色，但我不知道如何使代码在两个之间循环，所以我有一个最终会中断的长数组。

代码：

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 在左上角）

4

2 回答 2

3

我会采取一种稍微不同的方法来解决首次点击问题，让您永远循环使用颜色。

在您的页面模板中添加如下内容：

<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将被添加）。

于 2012-10-06T15:20:05.783 回答
0

我在网站上查看了您的代码..您是正确的，您将使用两个大型重复值数组 - 这不是编写好代码的方法（抱歉）。我会推荐类似于 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 文件中并在本地运行 - 它应该可以工作。:)

于 2012-10-06T16:34:51.190 回答