标签：loops onclick css javascript

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

>该功能仅在第二次单击时更改背景.第一次单击链接不会更改背景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()的调用将删除元素上存在的所有类(白天将在第一次单击时存在),并添加任何不存在的类(将添加夜间).

标签：loops,onclick,css,javascript
来源： https://codeday.me/bug/20191127/2075017.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。