我们可以用三元运算符（Es6）编写以下 if else 语句吗？

Question

我们可以用三元运算符以更简洁的方式编写以下 if else 语句吗？

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

Answer 1

这是最简洁的

 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>

更短的是

 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>

Answer 2

你可以用 ES6 写得更简洁，但我不会用三元运算符来写：

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

请注意，与您的代码相比，此代码中没有重复。 添加一个新类别将是 1 行。

使用类，就像在mplungjan 的回答中那样更好——如果所有需要的数据都在 html 中，那么您的 JS 变得更易于维护，因为您不需要使其与 html 保持同步。