代码之家 › 专栏 › 技术社区 › Streching my competence

js:switch/case更改类名不起作用

switch-statement function javascript

-2

Streching my competence · 技术社区 · 6 年前

所以我想做我的第一个开关/外壳功能,我不明白为什么它不能工作。我已经添加了一个控制台输出来测试用例是否有效,它似乎有效,但它从不更新类名:

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后面的开关中定义它,而不是var中的.classname,然后对每种情况都定义它。

2 回复 | 直到 6 年前

Mamun 6 年前

里面 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>

Damian Peralta 6 年前

问题不是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>