如何制作JavaScript'；getElementById'；使用HTML CSS切换开关

我需要使用JavaScript激活我的HTML/CSS“切换开关”

我希望默认情况下隐藏带有文本的DIV，当滑块（切换器）向左滑动时，它会使用JavaScript“触发”DIV以“显示”

我知道我在正确的道路上，但我的行动有些不太正确

函数toggleDiv（）{
var triggeredDiv=document.querySelector（'.triggeredDiv'）；
如果（document.getElementById（'flipswitch'）。选中）{
triggeredDiv.classList.remove（'显示'）；
}否则{
triggeredDiv.classList.add（'显示'）；
}
}
document.getElementById（'flipswitch'）。addEventListener（“更改”，toggleDiv）
.flipswitch{
位置：相对位置；
宽度：200px；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
}
.flipswitch输入[类型=复选框]{
显示：无；
}
.翻转开关标签{
显示：块；
溢出：隐藏；
光标：指针；
边框：2个实心#999999；
边界半径：50px；
}
.翻转开关内部{
宽度：200%；
左边距：-100%；
-webkit过渡：0秒后0.3秒的余量；
-moz转换：0秒时的余量为0.3秒；
-ms转换：0秒时的余量为0.3秒；
-o型过渡：0秒时裕度为0.3秒；
过渡：0秒时，边距为0.3秒；
}
.翻转开关内部：之前，
.翻转开关内部：之后{
浮动：左；
宽度：50%；
高度：60px；
填充：0；
线高：60px；
字号：18px；
颜色：白色；
字体系列：投石机，Arial，无衬线；
字体大小：粗体；
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
.翻转开关内部：之前{
内容：“每月”；
左侧填充：12px；
背景色：#FFFFFF；
颜色：#888888；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：400；
}
.翻转开关内部：之后{
内容：“按国家”；
右侧填充：12px；
背景色：#ebebebeb；
颜色：#888888；
文本对齐：右对齐；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：400；
}
.翻转开关{
宽度：45px；
利润率：7.5px；
背景：#FFFFFF；
边框：2个实心#999999；
边界半径：50px；
位置：绝对位置；
排名：0；
底部：0；
右：139px；
-webkit过渡：所有0.3都在0秒内轻松实现；
-moz转换：所有0.3秒在0秒内轻松完成；
-ms转换：所有0.3秒在0秒内轻松完成；
-o-过渡：所有0.3秒在0秒内轻松完成；
过渡：所有0.3秒在0秒内轻松过渡；
}
.flipswitch cb:选中+.flipswitch标签.flipswitch内部{
左边距：0；
}
.flipswitch cb:选中+.flipswitch标签.flipswitch开关{
右：0；
}
triggeredDiv先生{
显示：无；
}
.triggerediv.如图所示{
显示：块；
}

显示文本
我认为，如果您只需将函数中的
document.getElementById（'flipswitch'）
的两个实例更改为
document.getElementById（'fs'）
，您的代码运行良好

jsidle示例：
而不是使用
document.getElementById
您应该使用一些东西来通过
类
获取元素，因为这是在标记中定义的

此外，您的输入复选框没有切换
选中的
，它只是切换
触发的
div的状态

我们可以通过调整代码来实现这一点：

function toggleDiv() {
   this.element || ( this.element = document.querySelector('.triggeredDiv') );

   this.element.classList.toggle("shown");
  }


为了更好地理解，请发表评论：


函数toggleDiv（）{
this.element | |（this.element=document.querySelector（'.triggeredDiv'））；
this.element.classList.toggle（“显示”）；
}
document.querySelector（'.flipswitch'）。addEventListener（“更改”，toggleDiv）
.flipswitch{
位置：相对位置；
宽度：200px；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
}
.flipswitch输入[类型=复选框]{
显示：无；
}
.翻转开关标签{
显示：块；
溢出：隐藏；
光标：指针；
边框：2个实心#999999；
边界半径：50px；
}
.翻转开关内部{
宽度：200%；
左边距：-100%；
-webkit过渡：0秒后0.3秒的余量；
-moz转换：0秒时的余量为0.3秒；
-ms转换：0秒时的余量为0.3秒；
-o型过渡：0秒时裕度为0.3秒；
过渡：0秒时，边距为0.3秒；
}
.翻转开关内部：之前，
.翻转开关内部：之后{
浮动：左；
宽度：50%；
高度：60px；
填充：0；
线高：60px；
字号：18px；
颜色：白色；
字体系列：投石机，Arial，无衬线；
字体大小：粗体；
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
.翻转开关内部：之前{
内容：“每月”；
左侧填充：12px；
背景色：#FFFFFF；
颜色：#888888；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：400；
}
.翻转开关内部：之后{
内容：“按国家”；
右侧填充：12px；
背景色：#ebebebeb；
颜色：#888888；
文本对齐：右对齐；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：400；
}
.翻转开关{
宽度：45px；
利润率：7.5px；
背景：#FFFFFF；
边框：2个实心#999999；
边界半径：50px；
位置：绝对位置；
排名：0；
底部：0；
右：139px；
-webkit过渡：所有0.3都在0秒内轻松实现；
-moz转换：所有0.3秒在0秒内轻松完成；
-ms转换：所有0.3秒在0秒内轻松完成；
-o-过渡：所有0.3秒在0秒内轻松完成；
过渡：所有0.3秒在0秒内轻松过渡；
}
.flipswitch cb:选中+.flipswitch标签.flipswitch内部{
左边距：0；
}
.flipswitch cb:选中+.flipswitch标签.flipswitch开关{
右：0；
}
triggeredDiv先生{
显示：无；
}
.triggerediv.如图所示{
显示：块；
}

显示文本
这里的问题是，您试图通过flipswitch的id引用flipswitch，而您给了该开关一个fs的id。javascript中的引用只需更改为：

document.getElementById('fs')

而不是

document.getElementById('flipswitch')

翻转开关的id是“fs”，而不是“flipswitch”FYI，您的
if
语句可以通过使用带有开关参数的
toggle
来消除<鳕鱼
document.getElementById('flipswitch')