gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 10:49:45 26 4
gpt4 key购买 nike

我想在两个不同的主题(例如白天模式和夜间模式)之间循环点击背景图像和背景颜色。我正在使用以下代码,该代码有效,但存在两个问题:

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

最佳答案

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

将如下内容添加到您的页面模板中:

<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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com