Javascript JS:Switch/Case更改类名无效

因此，我试图实现我的第一个开关/外壳功能，但我不明白为什么它不起作用。我添加了一个控制台输出来测试这个案例是否有效，它似乎有效，但它从不更新类名：

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;
    }
}

我错过了什么？我也尝试过从变量中删除.className，但什么都没有。也没有错误。该函数也位于我的js的末尾，以确保没有任何干扰（没有任何东西具有相同的名称）

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

编辑2:已解决。我需要在变量之后的开关中定义.className，而不是在var中定义.className，然后在每种情况下定义相同的名称

在

switch（）

内部，您没有使用

菜单作为开关的参考。相反，您使用的是基本上是字符串的
className
。因此，您将无法使用
菜单。className
：

改变

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

到


函数菜单开关（）{
var菜单=document.getElementById（“侧栏”）；
开关（menu.className）{
案例“关于”：
menu.className=“关”；
log（'Classname现在应该是“off”'））
打破
案例“关闭”：
menu.className=“on”；
log（'Classname现在应该是“on”'））
打破
}
}
.on{
显示：无；
}
切换菜单
试验
问题不在于switch语句。
对于现代HTML5风格，请使用

尝试以下方法（请参阅注释）：


函数菜单开关（）{
var menu=document.getElementById（“侧栏”）；//获取DOM元素
var className=menu.className；//获取类
开关（类名）{
案例“关于”：
menu.classList.remove（'on'）；//在
menu.classList.add（'off'）；//add off
log（'Classname现在应该是“off”'））
打破
案例“关闭”：
menu.classList.remove（'off'）；
menu.classList.add（'on'）；
log（'Classname现在应该是“on”'））
打破
}
}
#侧边栏{
位置：固定；
}
.在{
左：0px；
}
.关{
左-100%；
}
切换菜单
试验
尝试
menu.classList.add（'on'）
或
menu.classList.remove（'on'）
将此
var menu=document.getElementById（“侧栏”）.className
更改为此
var menu=document.getElementById（“侧栏”）
基本上，您试图从字符串访问属性
className
。您正在向本地字符串添加一个名为
className
的属性。@Ele这就是我试图开始的。Slawwa，所以不是
console.log（'Classname现在应该是“off”）
I写
menu.classList.remove（'on'）
？我试过了，但还是一无所获。现在我看到JSFIDLE抛出了一个合适的说法，即
uncaughtreferenceerror:menuSwitch未在HTMLButtonElement.onclick（（index）：81）
中定义。这在我的实时环境中不会发生，所以现在JSFIDLE似乎不值得测试。谢谢，但我对使用jQuery还不感兴趣。对我的项目来说似乎有些过分了。@Strechingmycompetence，解决方案完全基于JS。我只是错误地添加了jQuery引用……现在删除了……谢谢……谢谢更新。这成功了！我添加了“off”作为默认类名，并为类“on”的左属性添加了0px。我不确定我是否理解为什么在这里，但对我来说，它只是在不同的情况下定义的相同。我想我需要做更多的研究。@Strechingmycompetence，非常欢迎你……有时我们都处于你现在的处境……这就是为什么我们在这个社区互相帮助…………快乐编程：）所以。。使用classlist，您可以得到一个可以迭代的数组，因此，它可以在var中定义.className，而不是直接在switch语句中，在我标记为解决方案的示例中？不，classlist返回一个DOMTokenList，它不是数组，但它类似，它有长度，您可以迭代。但它并没有所有内置的数组方法（如map、filter等）。DOMTokenList有自己的方法，如添加、删除、切换等。。。请点击此处：
var menu = document.getElementById("sidebar");
switch(menu.className) {