如何最小化类切换程序中以导航为目标的代码

Question

我喜欢干净的代码，但我不喜欢javascript。我想对下面的超简单代码做两件事：

function nav_open() {
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保留在nav上，使用id或类定位DOM元素是一种常见的方法，可以加快查找速度。使用getElementsByTagName()会增加不必要的复杂性，并且需要遍历整个DOM才能找到元素，因此它的效率不是很高，尤其是如果只有一个nav元素。如果您真的想，您可以使用querySelector来选择第一个nav项目：

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

不过，在一天结束时，如果你想与JavaScript代码中的元素交互，你需要显式地抓取它们(不包括对全局窗口对象的命名访问，因为建议不要使用它(。

---

为了进一步改进切换代码，您可以使用DOMTokenList.toggle()执行两个切换，一个用于隐藏第一个类，另一个用于添加另一个类。每次运行这两个开关时，它们都会添加/删除这两个类，具体取决于它们是否存在：

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