我們可以用三元運算符（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 保持同步。