gpt4 book ai didi

javascript - 使用javascript单击更改多个背景图像

转载 作者:行者123 更新时间:2023-11-28 00:58:14 25 4
gpt4 key购买 nike

所以我尝试使用 javascript 在点击时更改多个背景图像。

任何人都可以在这里提供帮助我试图通过单击更改多个背景图像,使用此代码我得到 2 个图像更改但是在函数 updateIndex 的某个地方我无法弄清楚如何使它在多个图像中连续。

提前致谢!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<div id="body" class="imageOne"></div>
<style>
html,
body, {
height: 100%;
width: 100%;
}

#body.imageOne {
background-image: url("first.svg");
}

#body.imageTwo {
background-image: url("2.svg");
}

#body.imageThree {
background-image: url("3.svg");
}

#body.imageFour {
background-image: url("first.svg");
}
</style>

<script>
var bodyObj, className, index;

// all background images, calling them to change

bodyObj = document.getElementById('body');
index = 1;
className = [
'imageOne',
'imageTwo',
'imageThree',
'imageFour',
];

function updateIndex() {
if (index === 0) {
index = 1;
} else {
index = 1;
index = 2;
}
}

bodyObj.onclick = function(e) {
e.currentTarget.className = className[index];
updateIndex();
}
</script>

最佳答案

索引设为0
为了循环使用 ++index % className.length

const className = ['imageOne','imageTwo','imageThree','imageFour']; 
let index = 0;

function updateClassName() {
this.className = className[++index % className.length];
}

document.getElementById('body').addEventListener("click", updateClassName);
html, body{height: 100%;width: 100%; margin:0;}
#body{ height: calc(100% - 4rem); background: center / cover; }
#body.imageOne {background-image: url("//placehold.co/800x600/0bf/fff");}
#body.imageTwo {background-image: url("//placehold.co/800x600/f0b/fff");}
#body.imageThree {background-image: url("//placehold.co/800x600/b0f/fff");}
#body.imageFour {background-image: url("//placehold.co/800x600/fb0/fff");}
Click the image
<div id="body" class="imageOne"></div>

关于javascript - 使用javascript单击更改多个背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43661254/

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