Quiero encontrar la forma más fácil de convertir una declaración de condición if else más larga. ¿Podemos escribir la siguiente declaración if else de una manera más concisa?
function pathology() { let pathologyValue = document.getElementById('pathologySuspecting').value; if (pathologyValue === 'Cushings') { document.getElementById('cushingsDetails').style.display = 'block'; document.getElementById('acromegalyDetails').style.display = 'none'; document.getElementById('otherPathologySuspectingDetails').style.display = 'none'; } else if (pathologyValue === 'Acromegaly') { document.getElementById('cushingsDetails').style.display = 'none'; document.getElementById('acromegalyDetails').style.display = 'block'; document.getElementById('otherPathologySuspectingDetails').style.display = 'none'; } else if (pathologyValue === 'Other') { document.getElementById('cushingsDetails').style.display = 'none'; document.getElementById('acromegalyDetails').style.display = 'none'; document.getElementById('otherPathologySuspectingDetails').style.display = 'block'; } else { document.getElementById('cushingsDetails').style.display = 'none'; document.getElementById('acromegalyDetails').style.display = 'none'; document.getElementById('otherPathologySuspectingDetails').style.display = 'none'; } } `Esto es tan conciso como se pone
document.getElementById("pathologySuspecting").addEventListener("change", function() { let pathologyValue = this.value.toLowerCase(); document.querySelectorAll(".details") .forEach(detail => detail.hidden = !detail.id.startsWith(pathologyValue)) }); <select id="pathologySuspecting"> <option value="">Please select</option> <option value="Cushings">Cushings</option> <option value="Acromegaly">Acromegaly</option> <option value="Other">Other</option> </select><br> <div id="cushingsDetails" class="details" hidden>Cushing</div> <div id="acromegalyDetails" class="details" hidden>Acromegaly</div> <div id="otherPathologySuspectingDetails" class="details" hidden>Other</div>Más corto sería
const divs = document.querySelectorAll(".details") document.getElementById("pathologySuspecting").addEventListener("change", function() { divs.forEach((detail, i) => detail.hidden = i !== this.selectedIndex-1) }); <select id="pathologySuspecting"> <option value="">Please select</option> <option value="Cushings">Cushings</option> <option value="Acromegaly">Acromegaly</option> <option value="Other">Other</option> </select><br> <div id="cushingsDetails" class="details" hidden>Cushing</div> <div id="acromegalyDetails" class="details" hidden>Acromegaly</div> <div id="otherPathologySuspectingDetails" class="details" hidden>Other</div>Puede usar ES6 para escribirlo de manera mucho más sucinta, pero no usaría el operador ternario para hacerlo:
function pathology() { const target = document.querySelector("#pathologySuspecting").value; for (let [key, sel] of Object.keys({ "Cushings": "#cushingsDetails", "Acromegaly": "#acromegalyDetails", "Other": "#otherPathologySuspectingDetails", })) { let e = document.querySelector(sel); e.style.display = (key === target) ? 'block' : 'none'; } }Tenga en cuenta que no hay repetición en este código, en comparación con el suyo. Agregar una nueva categoría sería 1 línea.
El uso de clases, como en la respuesta de mplungjan, es aún mejor: si todos los datos necesarios están en el html, su JS se vuelve mucho más fácil de mantener, porque no necesita mantenerlo sincronizado con el html.