Question

所以我试图做我的第一个switch / case函数，但我不知道为什么它不起作用。我添加了一个控制台输出来测试这种情况是否可行，似乎可以，但是它永远不会更新className：

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中的.className，我需要在var之后的开关中定义它，然后对每种情况都定义相同的内容。

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

尝试一下（见评论）：

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>

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

2 个答案: