Tengo 9 cajas en mi html.
Hay un valor, id llamado 'punto de vida'.
Hay una función de clic del mouse: haga clic una vez y disminuya un punto de vida. Este código está completo.
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!")}; }Además, hay un estilo css, llamado 'crackbox'.
.crackbox { position: relative; background: linear-gradient(0deg, black, rgb(120, 120, 120)); width: 12vh; height: 12vh; border-radius: 30%; margin: 5px; }Quiero cambiar todas las clases de caja de 'caja' a 'crackbox' si el punto de vida es cero. Por lo tanto, todo estilo de caja puede ser 'crackbox'.
El siguiente código falla...
$(document).ready(function () { $(".box").each(function() { document.getElementById('lifepoint').innerHTML = value; if(value <= 0) { ".box".toggleClass('crackbox') }; }) });La forma más sencilla sería usar querySelectorAll y recorrer los elementos:
for(let i = 0, list = document.querySelectorAll(".box"); i < list.length; i++) { list[i].classList.toggle('crackbox'); }O una versión ES6 más corta:
[...document.querySelectorAll(".box")].forEach(el => el.classList.toggle('crackbox'))En lugar de usar el documento listo, llame a otra función desde decrementar la vida si el valor se convierte en 0. Estoy escribiendo el código para su ayuda.
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'); }¡¡Espero eso ayude!!