JS：切换/案例更改类名不起作用

Question

所以我正在尝试创建我的第一个开关/案例功能，但我无法弄清楚它为什么不起作用。我添加了一个控制台输出来测试案例是否有效，看起来确实有效，但它从不更新类名：

function menuSwitch() {
    var menu = document.getElementById("sidebar").className;

    switch(menu) {
        case "on":
            menu.className = "off";
            console.log('Classname should now be "off"')
            break;
        case "off":
            menu.className = "on";
            console.log('Classname should now be "on"')
            break;
    }
}

https://jsfiddle.net/o39e05ag/2/

我错过了什么？我也尝试从变量中删除 .className ，但什么也没有。也没有错误。该函数也在我的 js 的最后，以确保没有任何干扰（也没有相同的名称）。

编辑：只是纯 JS。我不是在寻找 jQuery！

编辑 2： 已解决。我需要在 var 之后的 switch 中定义它，而不是 var 中的 .className ，然后在每种情况下都相同。

Answer 1

在switch() 内部，您没有使用menu 作为Element 的引用。相反，您使用的是className，它基本上是一个字符串。因此您将无法使用menu.className：

改变

var menu = document.getElementById("sidebar").className;
switch(menu) {

到

var menu = document.getElementById("sidebar");
switch(menu.className) {

function menuSwitch() {
  var menu = document.getElementById("sidebar");
  switch(menu.className) {
    case "on":
      menu.className = "off";
      console.log('Classname should now be "off"')
      break;
    case "off":
      menu.className = "on";
      console.log('Classname should now be "on"')
      break;
  }
}

.on{
  display: none;
}

<button onclick="menuSwitch()">Toggle menu</button>
<div id="sidebar" class="on">
Test
</div>

Answer 2

问题不在于 switch 语句。 对于现代 HTML5 样式，请使用 classList

试试这个（见 cmets）：

function menuSwitch() {
  var menu = document.getElementById("sidebar"); // Get the DOM element
  var className = menu.className; // Get the class

	switch(className) {
		case "on":
			menu.classList.remove('on'); // Remove on
            menu.classList.add('off'); // Add off
			console.log('Classname should now be "off"')
			break;
		case "off":
			menu.classList.remove('off');
      menu.classList.add('on');
			console.log('Classname should now be "on"')
			break;
	}
}

#sidebar {
	position: fixed;
}

.on {
	left: 0px;
}

.off {
	left: -100%;
}

<button onclick="menuSwitch();">Toggle menu</button>
<div id="sidebar" class="on">
Test
</div>