Estoy seguro de que hay una manera de escribir una versión más corta del siguiente código js. Al final solo me estoy repitiendo una y otra vez. ¿Alguna sugerencia?
¡Muchas gracias!
if (designVal == 0 && colorVal == 0) { design01yellow.style.display = "block"; design01black.style.display = "none"; design01blue.style.display = "none"; design01grey.style.display = "none"; design02yellow.style.display = "none"; design02black.style.display = "none"; design02blue.style.display = "none"; design02grey.style.display = "none"; design03yellow.style.display = "none"; design03black.style.display = "none"; design03blue.style.display = "none"; design03grey.style.display = "none"; } else if (designVal == 0 && colorVal == 1) { design01yellow.style.display = "none"; design01black.style.display = "block"; design01blue.style.display = "none"; design01grey.style.display = "none"; design02yellow.style.display = "none"; design02black.style.display = "none"; design02blue.style.display = "none"; design02grey.style.display = "none"; design03yellow.style.display = "none"; design03black.style.display = "none"; design03blue.style.display = "none"; design03grey.style.display = "none"; } else if (designVal == 0 && colorVal == 2) { design01yellow.style.display = "none"; design01black.style.display = "none"; design01blue.style.display = "block"; design01grey.style.display = "none"; design02yellow.style.display = "none"; design02black.style.display = "none"; design02blue.style.display = "none"; design02grey.style.display = "none"; design03yellow.style.display = "none"; design03black.style.display = "none"; design03blue.style.display = "none"; design03grey.style.display = "none"; } else if ///AND SO ONDé a todos los elementos una clase común (por ejemplo class="design" ). Vuelve sobre ellos, configurándolos todos en none , luego configura el elemento específico para block .
document.querySelectorAll(".design").forEach(el => el.style.display = "none"); if (designVal == 0 && colorVal == 0) { design01yellow.style.display = "block"; } else if (designVal == 0 && colorVal == 1) { design01black.style.display = "block"; } ...Los normalizaría a 'display: none' y luego solo configuraría el que desea display: block .
if (designVal === 0) { design01yellow.style.display = "none"; design01black.style.display = "none"; design01blue.style.display = "none"; design01grey.style.display = "none"; design02yellow.style.display = "none"; design02black.style.display = "none"; design02blue.style.display = "none"; design02grey.style.display = "none"; design03yellow.style.display = "none"; design03black.style.display = "none"; design03blue.style.display = "none"; design03grey.style.display = "none"; if(colorVal === 0) { design01yellow.style.display = "block"; } else if (colorVal === 1) { design01black.style.display = "block"; } else if (colorVal === 2) { design01blue.style.display = "block"; } // and so on }