尝试反转HTML/CSS切换器的JavaScript触发器
我有一个HTML，CSS切换器，它工作得很好 但是-我希望效果相反，这样就根本没有文本，但是当切换开关被滑动时，通过DIV的文本被触发-因此基本上与当前的情况相反 有什么办法吗？我试着玩“隐藏”类，但我无法让它工作 代码如下： 函数切换div{ 如果document.getElementById'myonoffswitch'。已选中{ document.querySelector.triggeredDiv.classList.remove'hidden'； }否则{ document.querySelector.triggeredDiv.classList.add'hidden'； } } getElementById'myonoffswitch'。添加了EventListenerChange，toggleDiv； .ONOFF开关{ 位置：相对位置； 宽度：200px； -webkit用户选择：无； -moz用户选择：无； -ms用户选择：无； } .onoffswitch复选框{ 显示：无； } .ONOFF开关标签{ 显示：块； 溢出：隐藏； 光标：指针； 边框：2个实心999999； 边界半径：20px； } .ONOFF开关内部{ 显示：块； 宽度：200%； 左边距：-100%； 过渡：0秒时，边距为0.3秒； } .ONOFF开关内部：之前， .ONOFF开关内部：之后{ 显示：块； 浮动：左； 宽度：50%； 高度：51px； 填充：0； 线高：51px； 字体大小：14px； 颜色：白色； 字体系列：投石机，Arial，无衬线； 字体大小：粗体； 框大小：边框框； } .ONOFF开关内部：之前{ 内容：按国家分列； 左侧填充：10px； 背景色：dfe4ea； 颜色：999999； } .ONOFF开关内部：之后{ 内容：显示文本； 右边填充：10px； 背景色：dfe4ea； 颜色：999999； 文本对齐：右对齐； } .ONOFF开关{ 显示：块； 宽度：50px； 利润率：0.5px； 背景：a1a1； 位置：绝对位置； 排名：0； 底部：0； 右：145px； 边框：2个实心999999； 边界半径：20px； 过渡：所有0.3秒在0秒内轻松过渡； } .onoffswitch复选框：选中+.onoffswitch标签.onoffswitch内部{ 左边距：0； } .onoffswitch复选框：选中+.onoffswitch标签.onoffswitch开关{ 右：0px； 背景颜色：999999； } triggeredDiv先生{ 显示：块； } .triggeredDiv.hidden{ 显示：无； } 显示文本 我将类名从hidden更改为Showed，并相应地调整了JavaScript triggeredDiv先生{ 显示：无； } .triggerediv.如图所示{ 显示：块； } 演示 函数切换div{ var triggeredDiv=document.querySelector'.triggeredDiv'； 如果document.getElementById'myonoffswitch'。已选中{ 类列表。删除“已显示”； }否则{ triggeredDiv.classList.add'Showed'； } } getElementById'myonoffswitch'。添加了EventListenerChange，toggleDiv； .ONOFF开关{ 位置：相对位置； 宽度：200px； -webkit用户选择：无； -moz用户选择：无； -ms用户选择：无； } .onoffswitch复选框{ 显示：无； } .ONOFF开关标签{ 显示：块； 溢出：隐藏； 光标：指针； 边框：2个实心999999； 边界半径：20px； } .ONOFF开关内部{ 显示：块； 宽度：200%； 左边距：-100%； 过渡：0秒时，边距为0.3秒； } .ONOFF开关内部：之前， .ONOFF开关内部：之后{ 显示：块； 浮动：左； 宽度：50%； 高度：51px； 填充：0； 线高：51px； 字体大小：14px； 颜色：白色； 字体系列：投石机，Arial，无衬线； 字体大小：粗体； 框大小：边框框； } .ONOFF开关内部：之前{ 内容：按国家分列； 左侧填充：10px； 背景色：dfe4ea； 颜色：999999； } .ONOFF开关内部：之后{ 内容：显示文本； 右边填充：10px； 背景色：dfe4ea； 颜色：999999； 文本对齐：右对齐； } .ONOFF开关{ 显示：块； 宽度：50px； 利润率：0.5px； 背景：a1a1； 位置：绝对位置； 排名：0； 底部：0； 右：145px； 边框：2个实心999999； 边界半径：20px； 过渡：所有0.3秒在0秒内轻松过渡； } .onoffswitch复选框：选中+.onoffswitch标签.onoffswitch内部{ 左边距：0； } .onoffswitch复选框：选中+.onoffswitch标签.onoffswitch开关{ 右：0px； 背景颜色：999999； } triggeredDiv先生{ 显示：无； } .triggerediv.如图所示{ 显示：块； } 显示文本尝试反转HTML/CSS切换器的JavaScript触发器,javascript,html,css,Javascript,Html,Css,我有一个HTML，CSS切换器，它工作得很好 但是-我希望效果相反，这样就根本没有文本，但是当切换开关被滑动时，通过DIV的文本被触发-因此基本上与当前的情况相反 有什么办法吗？我试着玩“隐藏”类，但我无法让它工作 代码如下： 函数切换div{ 如果document.getElementById'myonoffswitch'。已选中{ document.querySelector.triggeredDiv.classList.remove'hidden'； }否则{ document.quer
您需要反转逻辑并最初调用函数
function toggleDiv() {
if (document.getElementById('myonoffswitch').checked) {
document.querySelector('.triggeredDiv').classList.add('hidden');
} else {
document.querySelector('.triggeredDiv').classList.remove('hidden');
}
}
toggleDiv() // initial call. You may need to wait DOMContentLoaded
.隐藏和显示：块@YuryTarabanko I将类名从hidden调整为Showed。OP不使用jquery。推广一个用于显示/隐藏元素的大型库是一个糟糕的做法。他有没有提到任何不向JQuery开放的地方？！这是一个选择。。。使用与否，并不意味着它错了！！另外，他明确表示他使用了它，但它在@YuryTarabankoOk上不起作用，但我仍然认为这个答案很糟糕正在升级以使用和加载大型库。。。使用say Angular进行完全重写也是一种选择。在本例中，反转逻辑是唯一需要的。这应该是正确的答案。