Javascript 一个按钮的jQuery开/关功能不工作？

我想让我的按钮作为一个灯光开关工作，我用两个单独的按钮尝试了这一点，它工作了，但当我把它做成一个单独的按钮时，它不工作，它发出警报，但不改变样式，有什么建议吗？我把javascript和jquery混合在一起，可能有一些语法问题（我学习了多个关于js和jquery的教程）

$（文档）.ready（函数（）{
$（“#灯光”）。单击（函数（）{
如果（ijungtas==0）{
ijungtas=1；
警报（“a”）
}否则{
ijungtas=0
警报（“b”）
}
});
如果（ijungtas==1）{
$（“#灯光”）。单击（函数（）{
$（“.tamsus”）.css({
显示：“块”，
“背景色”：“黑色”，
“位置”：“绝对”，
“颜色”：“fff”，
“高度”：“100vh”，
“宽度”：“100%”，
“z指数”：“88”，
});
});
$（“#灯光”）。单击（函数（）{
$（“.wrapper”）.css({
显示：“无”
});
});
$（“#灯光”）。单击（函数（）{
$（“.right_side”）.css({
“z索引”：“999”
});
});
$（“#灯光”）。单击（函数（）{
$（“#测试”）.css({
“显示”：“无”
});
});
$（“#灯光”）。单击（函数（）{
$（“.room_box”）.css({
“不透明度”：“0”
});
});
$（“#灯光”）。单击（函数（）{
$（“#主机名”）.css({
“不透明度”：“0”
});
});
}
如果（ijungtas==0）{
$（“#灯光”）。单击（函数（）{
$（“.wrapper”）.css({
显示：“块”
});
});
$（“#灯光”）。单击（函数（）{
$（“.right_side”）.css({
z索引：“0”
});
});
$（“#灯光”）。单击（函数（）{
$（“.tamsus”）.css({
“显示”：“无”
})
});
$（“#灯光”）。单击（函数（）{
$（“.right_side”）.removeClass（“活动”）
});
$（“#灯光”）。单击（函数（）{
$（“.test”）.css({
显示：“flex”
});
});
$（“#灯光”）。单击（函数（）{
$（“#测试”）.css({
“显示”：“继承”
});
});
$（“#灯光”）。单击（函数（）{
$（“.room_box”）.css({
“不透明度”：“1”
});
});
$（“#灯光”）。单击（函数（）{
$（“#主机名”）.css({
“不透明度”：“1”
});
});
}
});
.tamsus.active{
显示：无！重要；
背景：黑色！重要；
}
.左(右)货柜{
z指数：89！重要；
}
.room_box。激活{
字体大小：100px；
}
.chat.active{
显示：无！重要；
z指数：99；
}
.测试.激活{
显示：无！重要；
}

打开/关闭指示灯
您真的可以重构它，使其更易于阅读和维护。这里有一个建议：

<script>
  $(document).ready(function() {
    var ijungtas = false // lights off is the default
  $("#lights").click(function() {
    if (!ijungtas) {
      $("body").addClass('lights-on');
      $(".right_side").addClass("active")
    }
    else {
      $("body").removeClass('lights-on');
      $(".right_side").removeClass("active")
    }
    ijungtas = !ijungtas; //switch
  });
</script>

<style>
 /* Lights Off style DEFAULT*/
  .tamsus{
      display: block;
        background-color: black;
        position: absolute;
        color: #fff;
        height: 100vh;
        width: 100%;
        z-index: 88;
   }
   .wrapper, #test{
     display: none;
   }
   .right_side{
     z-index: 999;
   }
   .room_box, .hostname{
     opacity:0;
   }


/* Lights On style */
   body.lights-on .tamsus{
      display: none;
   }
   body.lights-on .wrapper, body.lights-on #test{
     display: inherit;
   }
   body.lights-on .right_side{
     z-index: 0;
   }
   body.lights-on .room_box, body.lights-on .hostname{
     opacity:1;
   }
</style>


$（文档）.ready（函数（）{
var ijungtas=false//lights off是默认值
$（“#灯光”）。单击（函数（）{
如果（！ijungtas）{
$（“body”）.addClass（“lights-on”）；
$（“.right_side”）.addClass（“活动”）
}
否则{
$（“body”）.removeClass（'lights-on'）；
$（“.right_side”）.removeClass（“活动”）
}
ijungtas=！ijungtas；//开关
});
/*灯光关闭样式默认值*/
塔姆苏斯先生{
显示：块；
背景色：黑色；
位置：绝对位置；
颜色：#fff；
高度：100vh；
宽度：100%；
z指数：88；
}
.wrapper，#测试{
显示：无；
}
.右侧{
z指数：999；
}
.room_box、.hostname{
不透明度：0；
}
/*灯饰风格*/
身体。灯亮着。塔姆苏斯{
显示：无；
}
body.lights-on.wrapper，body.lights-on#测试{
显示：继承；
}
车身。灯亮。右侧{
z指数：0；
}
body.lights-on.room_box，body.lights-on.hostname{
不透明度：1；
}
此示例无法运行，因为您更改的所有类都不在html中

通过切换主体的类并向css声明灯光样式（如
body.enlighted.left_container{…}
），只需一个事件处理程序就可以实现所需的效果。由于缺少html元素，我的示例仅对主体进行了宽度调整

工作示例：


$（文档）.ready（函数（）{
$（“#灯光”）。单击（函数（）{
$（'body'）.toggleClass（'enlighted'）；
console.log（'toggled'）；
});
})；
.enlighted{
背景颜色：黄色；
}

打开/关闭指示灯
我在您的代码段中添加了jQuery，它会产生语法错误，请尝试运行它。使用
console.log（）
或调试器进行故障排除，而不是使用
警报
“剪切和粘贴编程”只会让您走到这一步。最终，对于真正理解您正在做的事情，没有替代品。