我的 html 中有 9 個框。
有一個值，id 稱為“生命點”。
有滑鼠點擊功能：點擊一次，減少一個生命值。這段代碼就完成了。
function decrementlife() {
var element = document.getElementById('lifepoint');
var value = element.innerHTML;
--value;
console.log(value);
document.getElementById('lifepoint').innerHTML = value;
if(value <= 0) { alert("Game Over!")};
}
此外，還有一種 css 樣式，稱為“crackbox”。
.crackbox {
position: relative;
background: linear-gradient(0deg, black, rgb(120, 120, 120));
width: 12vh;
height: 12vh;
border-radius: 30%;
margin: 5px;
}
如果生命值為零，我想將所有盒子類從“盒子”更改為“破解盒子”。因此，所有盒子樣式都可以是“crackbox”。
下面的代碼是失敗...
$(document).ready(function () {
$(".box").each(function() {
document.getElementById('lifepoint').innerHTML = value;
if(value <= 0) {
".box".toggleClass('crackbox')
};
})
});
uj5u.com熱心網友回復：
如果值變為 0，則不要使用準備好的檔案，而是從遞減生命中呼叫另一個函式。我正在撰寫代碼以尋求幫助。
function decrementlife() {
var element = document.getElementById('lifepoint');
var value = element.innerHTML;
--value;
console.log(value);
document.getElementById('lifepoint').innerHTML = value;
if(value <= 0) { changeClass(); alert("Game Over!")};
}
function changeClass(){
$('.box').addClass('crackbox').removeClass('box');
}
希望能幫助到你！！
uj5u.com熱心網友回復：
最簡單的方法是使用querySelectorAll和回圈遍歷元素：
for(let i = 0, list = document.querySelectorAll(".box"); i < list.length; i )
{
list[i].classList.toggle('crackbox');
}
或者更短的 ES6 版本：
[...document.querySelectorAll(".box")].forEach(el => el.classList.toggle('crackbox'))
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/462487.html
標籤：javascript html css