时间戳

首页 > 解决方案 > JS：切换/案例更改类名不起作用

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

问题描述

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

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 ，然后在每种情况下都相同。

标签： javascriptfunctionswitch-statement

解决方案

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

推荐阅读