循环通过背景图像 onClick 工作 - 但仅在 secondClick答案

【问题标题】：Loop thru background-images onClick working—but only on secondClick循环通过背景图像 onClick 工作 - 但仅在 secondClick
【发布时间】：2012-09-27 11:21:00
【问题描述】：

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

该功能仅在第二次单击时更改背景。第一次点击链接不会改变背景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 在左上角）

【问题讨论】：

你不应该依赖那个数组。做一些数学运算，这样您就可以知道单击时要做什么。怎么样：当你改为晚上时设置一个'data-time =“night”。如果您在身体上发现它，请将其取下并切换到白天。

标签： javascript css loops onclick

【解决方案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）并添加任何不存在的类（nighttime 将被添加）。

【讨论】：

您可以稍微简化它，而不是使用daytime 类，只需将其作为默认样式，然后您需要做的就是toggleClass('nighttime')。
是的！如此明智。谢谢你。 @ultranaut 我也考虑了你的建议。遗憾的是，奇怪的是，这在 IE8 中没有！我已经实现了here 的代码。我已经非常感谢这种洞察力，我会继续调试，但也许有人想为 IE 改变什么。
如果您遇到问题，请确保包含我之前忘记提及的return false;，并使用z-index 或其他一些css 技术将按钮保持在其他元素之上。没有它，您可能会发现自己点击了<h1> 或其他东西，而不是<a> 标记。

【解决方案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 文件中并在本地运行 - 它应该可以工作。 :)

【讨论】：

我比我建议的更喜欢这个解决方案 :) 虽然我无法让它在我的服务器上工作。我看不出代码有什么问题。感谢您的反馈意见。它可能对其他人有用，或者我可以自己使用它。