我正在尝试制作一个游戏,当用户单击按钮/div(将来清除地板)时,用户将被发送到新的“楼层”,一个新的 div“亮起”(变黑)但我似乎无法让它工作。所以想法是通过单击 div,它会调用函数,它将变量级别提高 1,并且当开关运行时,它会亮起(将 div 变黑)许多 ID 为“floor1-”的 div 9"
var level = 1
function floor() {
level += 1;
}
switch (floor) {
case 1:
if (level >= 1) {
document.getElementById("floor1").style.color = "black";
} else {
document.getElementById("floor1").style.color = "white";
}
break;
case 2:
if (level >= 2) {
document.getElementById("floor2").style.color = "black";
} else {
document.getElementById("floor2").style.color = "white";
}
break;
case 3:
if (level >= 3) {
document.getElementById("floor3").style.color = "black";
} else {
document.getElementById("floor3").style.color = "white";
}
break;
case 4:
if (level >= 4) {
document.getElementById("floor4").style.color = "black";
} else {
document.getElementById("floor4").style.color = "white";
}
break;
case 5:
if (level >= 5) {
document.getElementById("floor5").style.color = "black";
} else {
document.getElementById("floor5").style.color = "white";
}
case 6:
if (level >= 6) {
document.getElementById("floor6").style.color = "black";
} else {
document.getElementById("floor6").style.color = "white";
}
break;
case 7:
if (level >= 7) {
document.getElementById("floor7").style.color = "black";
} else {
document.getElementById("floor7").style.color = "white";
}
break;
case 8:
if (level >= 8) {
document.getElementById("floor8").style.color = "black";
} else {
document.getElementById("floor8").style.color = "white";
}
break;
case 9:
if (level >= 9) {
document.getElementById("floor9").style.color = "black";
} else {
document.getElementById("floor9").style.color = "white";
}
break;
default:
}
html,
body {
margin: 0px;
padding: 0px;
}
.quizdiv {
height: 200px;
width: 300px;
border: 5px solid black;
margin-right: auto;
margin-left: auto;
margin-top: 15%;
}
.button {
height: 100px;
width: 100px;
border: 5px solid black;
border-radius: 50%;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
.button:active {
width: 95px;
height: 95px;
}
.level {
height: relative;
width: 50px;
float: right;
border: 3px solid black;
}
.floor {
height: 20px;
border: 1px solid black;
}
<body>
<div class="quizdiv">
<div onclick="floor()" class="button"></div>
</div>
<div class="level">
<div class="floor" id="floor1"></div>
<div class="floor" id="floor2"></div>
<div class="floor" id="floor3"></div>
<div class="floor" id="floor4"></div>
<div class="floor" id="floor5"></div>
<div class="floor" id="floor6"></div>
<div class="floor" id="floor7"></div>
<div class="floor" id="floot8"></div>
<div class="floor" id="floor9"></div>
</div>
</body>
最佳答案
我稍微修改了代码。
在
floor()
函数中移动了switch
将
color
更改为backgroundColor
。去掉了所有的
else
,我觉得没必要将
floot8
更改为floor8
将
<level = 1
更改为level = 0
,这样函数就会进入case 1
不确定这是否是您想要的,但这点亮了直到最后一层的所有分区。由于我使用了您的原始格式,因此我没有费心优化代码
var level = 0;
function floor() {
level += 1;
switch (level) {
case 1:
if (level >= 1) {
document.getElementById("floor1").style.backgroundColor = "black";
}
break;
case 2:
if (level >= 2) {
document.getElementById("floor2").style.backgroundColor = "black";
}
break;
case 3:
if (level >= 3) {
document.getElementById("floor3").style.backgroundColor = "black";
}
break;
case 4:
if (level >= 4) {
document.getElementById("floor4").style.backgroundColor = "black";
}
break;
case 5:
if (level >= 5) {
document.getElementById("floor5").style.backgroundColor = "black";
}
case 6:
if (level >= 6) {
document.getElementById("floor6").style.backgroundColor = "black";
}
break;
case 7:
if (level >= 7) {
document.getElementById("floor7").style.backgroundColor = "black";
}
break;
case 8:
if (level >= 8) {
document.getElementById("floor8").style.backgroundColor = "black";
}
break;
case 9:
if (level >= 9) {
document.getElementById("floor9").style.backgroundColor = "black";
}
break;
default:
}
}
html,
body {
margin: 0px;
padding: 0px;
}
.quizdiv {
height: 200px;
width: 300px;
border: 5px solid black;
margin-right: auto;
margin-left: auto;
margin-top: 15%;
}
.button {
height: 100px;
width: 100px;
border: 5px solid black;
border-radius: 50%;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
.button:active {
width: 95px;
height: 95px;
}
.level {
height: relative;
width: 50px;
float: right;
border: 3px solid black;
}
.floor {
height: 20px;
border: 1px solid black;
}
<body>
<div class="quizdiv">
<div onclick="floor()" class="button"></div>
</div>
<div class="level">
<div class="floor" id="floor1"></div>
<div class="floor" id="floor2"></div>
<div class="floor" id="floor3"></div>
<div class="floor" id="floor4"></div>
<div class="floor" id="floor5"></div>
<div class="floor" id="floor6"></div>
<div class="floor" id="floor7"></div>
<div class="floor" id="floor8"></div>
<div class="floor" id="floor9"></div>
</div>
</body>
关于javascript - 如何在 div 单击时调用函数,以及正确使用开关?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52869955/