javascript - 单击更改 CSS 背景图像 - while 循环不起作用

Question

对于知道自己在做什么的人来说可能只是一个小问题......

我想创建这样的东西:https://marvelapp.com/404 Gif 作为全屏背景加载，当您按下“空格”时，您会得到另一个 gif，依此类推。看到所有 gif 后，循环再次开始。

所以我搜索了如何执行此操作并找到了这种方法(选项 3):https://www.linkedin.com/pulse/20140702040804-99746459-change-css-background-image-with-click (此处也使用:How to change css background-image on click?) 它不适用于空格，但鼠标单击效果更好。

我试图插入一个 while 循环来让它处理两张以上的图片，但是......它不起作用，我也不知道为什么

我的方法:http://jsfiddle.net/h3mfk347/

function updateIndex(){
while (index < 4) {
    index++;
}
} index = 0;
bodyObj.onclick = function(e){
e.currentTarget.className = className[index];
updateIndex();
}

所以我想这更多是循环的问题，而不是其他部分的问题。

感谢任何帮助或提示:)

Answer 1

你不需要循环，使用“if”(条件结构):

if (index < 4) {
    index++;
} else {
    index = 0;
}

您的 while 循环会将索引加 1 直到索引为 4，然后将其放回 0 以便重新启动。

此外，类名(在您的 CSS 中)不能以数字开头(如#body.4 和#body.5)，而必须以字母开头(如#body.img4)