如何最小化針對導航的 class 切換器中的代碼？

Question

我喜歡干凈的代碼，但我在 javascript 中為零。 我想對下面的超級簡單代碼做兩件事：

var myNav=document.getElementById("nav_anim");
if(myNav.className=='nav_closed')myNav.className='nav_open';}
else{myNav.className='nav_closed';}}

1. 使用getelementsbytagname來定位導航而不是給它一個無用的ID（為了在正文中只使用<nav>而不是<nav id="nav_anim"> 。我嘗試了一些組合，但它們都不起作用。
2. 擺脫那個丑陋的 myNav 名字，是強制性的嗎？ 我知道我可以更改它，但我可以刪除它嗎？ 是否可以使用類似nav.className=='nav_closed'甚至更好className=='nav_closed'而不是myNav.className=='nav_closed'

謝謝

Answer 1

我建議將 id 保留在您的導航上，使用 id 或類來定位您的 DOM 元素是通常所做的事情，並且可以加快查找速度。 使用getElementsByTagName()會增加不必要的復雜性，並且需要遍歷整個 DOM 才能找到您的元素，因此效率不高，尤其是如果您只有一個nav元素。 如果你真的想，你可以使用 querySelector 到 select 第一個nav項：

const myNav = document.querySelector("nav");

但是，歸根結底，如果您想與 JavaScript 代碼中的元素進行交互，則需要顯式獲取它們（不包括全局 window object 上的命名訪問）， 建議不要使用它。

---

為了進一步改進您的切換代碼，您可以使用DOMTokenList.toggle()執行兩個切換，一個隱藏您的第一個 class，一個添加您的另一個。 每次運行兩個切換時，它們都會根據它們是否存在來添加/刪除兩個類：

const myNav = document.getElementById("nav_anim");
myNav.classList.toggle('nav_closed');
myNav.classList.toggle('nav_open');

請參見下面的示例：

 const btn = document.getElementById("btn"); btn.addEventListener("click", () => { btn.classList.toggle("on"); btn.classList.toggle("off"); });

 .on { background-color: lightgreen; }.off { background-color: red; }

 <button id="btn" class="on">Click me</button>

根據您的代碼，您甚至可以通過定位沒有nav_open nav_closed ：

#nav_anim:not(.nav_open) {
  /* nav_closed styles */
}

使用此設置，您只能使用一個切換：

const myNav = document.getElementById("nav_anim");
myNav.classList.toggle('nav_open');

請參見下面的示例：

 const btn = document.getElementById("btn"); btn.addEventListener("click", () => { btn.classList.toggle("on"); });

 .on { background-color: lightgreen; } #btn:not(.on) { background-color: red; }

 <button id="btn" class="on">Click me</button>

Answer 2

您應該可以使用條件（三元）運算符來執行此操作，如下所示：

var nav = document.getElementsByTagName("nav")[0];

(nav.classList.contains('nav_open')) ? nav.classList.remove('nav_open') : nav.classList.add('nav_open'));

這就像一個帶有 3 個參數的 1 行 if 語句：

健康）狀況？ exprIfTrue: exprIfFalse