Javascript:如何在value为0时更改class和CSS

Question

我的html中有9个box .

有一个值id叫做'lifepoint'

有鼠标点击功能:点击一次&减少1点生命值。此代码已完成。

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;
}

如果生命点为0，我想将所有的box类从'box'更改为'crackbox'。因此，所有的box style都可以是'crackbox'。

下面的代码是fail…

$(document).ready(function () {
$(".box").each(function() {
document.getElementById('lifepoint').innerHTML = value;
if(value <= 0) { 
".box".toggleClass('crackbox')
};
})
});

Answer 1

如果该值变为0，则调用减量生命周期中的另一个函数，而不是使用document ready。我写代码是为了你的帮助。

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');
}

希望有帮助!!

Answer 2

最简单的方法是使用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'))