Javascript 将“开”/“关”文本添加到切换按钮

我正在尝试向一些切换按钮添加文本；当按钮打开时，紫色部分为ON，当切换开关关闭时，灰色部分为OFF。我已经尝试使用content:ON属性添加或关闭，但可能使用不正确。任何帮助都将不胜感激

链接到js fiddle:

查看答案。CSS:：before和：：after可以帮助您。

创建了一个：：before伪元素，并根据需要对其进行样式/定位

/*! ========================================================= *材料套件-v1.1.1.0 ========================================================= *产品页：http://www.creative-tim.com/product/material-kit *版权所有2017创意蒂姆http://www.creative-tim.com *麻省理工学院授权https://github.com/timcreative/material-kit/blob/master/LICENSE.md ========================================================= *上述版权声明和本许可声明应包含在软件的所有副本或实质部分中。 */ var透明=真； var transparentDemo=true； var fixedTop=false； var navbar_initialized=false； $document.readyfunction{ //按钮涟漪、输入动画等的初始化材质脚本，下一个链接的更多信息https://github.com/FezVrasta/bootstrap-material-designmaterialjs $.material.init； //激活工具提示 $'[data toggle=tooltip]，[rel=tooltip]'； //激活日期选择器 如果$'.datepicker'.length！=0{ $'.datepicker'.datepicker{ 周开始：1 }; } //检查我们是否有类导航栏颜色的滚动，然后添加功能删除类导航栏透明，使其将转换为纯颜色。 如果$'.navbar颜色在滚动'.length！=0{ $window.on'scroll'，materialKit.checkScrollForTransparentNavbar } //激活爆米花 $'[data toggle=popover]'； //主动旋转木马 $'.carousel'.carousel{ 间隔：40万 }; }; materialKit={ 杂项：{ 导航栏菜单可见：0 }, 选中ScrollForTransparentNavBar:debouncefunction{ 如果$document.scrollTop>260{ 如果透明{ 透明=假； $'.navbar滚动条颜色'.removeClass'navbar-transparent'； } }否则{ 如果！透明{ 透明=真实； $'.navbar滚动条颜色'.addClass'navbar-transparent'； } } }, 17, 初始化滑块：函数{ //演示用滑块 $'sliderRegular'.noUiSlider{ 开始：40， 连接：下， 范围：{ 分:0,， 最高：100 } }; $'sliderDouble'.noUiSlider{ 开始：[20,60]， 连接：是的， 范围：{ 分:0,， 最高：100 } }; } } var大_图像； materialKitDemo={ 检查滚动视差：去焦功能{ var current_scroll=$this.scrollTop； 椭圆形=$window.scrollTop/3； big_image.css{ “transform”：“translate3d0，”+oVal+“px，0”， “-webkit transform”：“translate3d0，”+oVal+“px，0”， “-ms transform”：“translate3d0，”+oVal+“px，0”， “-o-变换”：“translate3d0，”+oVal+“px，0” }; }, 6 } //返回一个函数，只要该函数继续被调用，它就不会被调用 //被触发。函数停止调用后将被调用 //N毫秒。如果传递了'immediate'，则在 //前缘，而不是后缘。 函数debouncefunc，等待，立即{ var超时； 返回函数{ var context=this， args=参数； clearTimeouttimeout； 超时=setTimeoutfunction{ 超时=空； if！立即函数applycontext，args； }，等等； 如果立即&&！超时func.applycontext，args； }; }; ! 函数{ 功能ot{ 返回undefined==typeof t.which？！0:number==typeof t.which&&t.which>0？！t.ctrlKey&&t.metaKey&&t.altKey&&8！=t.which&&9！=t.which&&13！=t.which&&16！=t.which&&17！=t.which&&20！=t.which&&27！=t.which:！1 } 函数io{ var i=至； i、 propdisabled | | i.closest.form-group.addClassis-focused } 功能编号{ o、 closestlabel.hover函数{ var o=t此findinput； o、 propdisabled | | io }，功能{ 埃蒂斯·芬迪普特 } } 功能eo{ to.closest.form-group.removeClassis-focused } t、 expr[：].notmdproc=functiono{ 返回到.datamdproc？！1:！0 }，t.材料={ 选项：{ 验证：！0， 输入：！0， 涟漪：！0， 复选框：！0， 切换按钮：！0， 电台：！0， 到达：！0， 自动填充：！1， withripple:[.btn:not.btn-link、.card image、.navbar a:not.without Ripple、.footer a:not.without Ripple、.下拉菜单a、.nav选项卡a:not.without Ripple、.withripple、.pagination li:not.active:not.disabled a:not.without Ripple].join，， inputElements:input.form-control、textarea.form-control、select.form-control、， 复选框元素：。复选框>标签>输入[ 类型=复选框]， togglebutton元素：。togglebutton>标签>输入[type=checkbox]， radioElements:.收音机>标签>输入[类型=收音机] }, 复选框：functiono{ var i=to？o:this.options.checkboxElements.filter:notmdproc.datamdproc，！0.after； 镍 }, 切换按钮：functiono{ var i=to？o:this.options.togglebuttonElements.filter:notmdproc.datamdproc，！0.after； 镍 }, 收音机：functiono{ var i=to？o:this.options.radioElements.filter:notmdproc.datamdproc，！0.after； 镍 }, 输入：functiono{ to？o:this.options.inputElements.filter:notmdproc.datamdproc，！0.eachfunction{ var o=t这一点， i=o.最接近的形式组； 0===i.length&&o.wrap，i=o.closest.form-group，o.attrdata-hint&&o.after

+o.attrdata-hint+

，o.removeAttrdata-hint； 变量n={ 输入lg：表格组lg， 输入sm：表单组sm }; 如果t.eachn，函数t，n{ o、 hasClasst和o.removeClasst，i.addClassn }，o.hassclassfloating-label{ var e=o.attr占位符； o、 attrplaceholder，null.removeClassfloating-label； 变量a=o.attrid， r=； a&&r=for='+a+'，i.addClasslabel-floating，o.after+e+ }null==o.val | | undefined==o.val | |==o.val&&i.addClassis-empty，i.append，i.findinput[type=file]。长度>0&&i.addClassis-fileinput } }, attachInputEventHandlers:函数{ var n=this.options.validate； tdocument.onchange、.checkbox输入[type=checkbox]，函数{ 这是模糊的 }.onkeydown粘贴、.form控件、functioni{ oi&&t this.closest.form-group.removeClassis-empty }.onkeyup更改、.form控件、函数{ var o=t这一点， i=o.o.form-group， e=未定义==o[0]的类型。检查有效性| | o[0]。检查有效性； ==o.val？i.addClassis-empty:i.removeClassis-empty，n&&e？i.removeClasshas-error:i.addClasshas-error }.onfocus、.form控件、.form-group.is-fileinput、函数{ 伊蒂斯 }.onblur、.form控件、.form-group.is-fileinput、函数{ 伦理 }.onchange、.form组输入、函数{ var o=t这； 如果文件！=o.attrtype{ var i=o.最近形式组， n=o.val； n？i.removeClassis-empty:i.addClassis-empty } }.onchange、.form-group.is-fileinput[type='file']，函数{ var o=t这一点， i=o.o.form-group， n=； t、 每个this.files、function、o{ n+=o.name+， }，n=n.substring0，n.length-2，n？i.removeClassis-empty:i.addClassis-empty，i.findinput.form控件[readonly]。valn } }, 涟漪：functiono{ 收件人：this.options.withRipples.ripples }, 自动填充：函数{ var o=设置间隔函数{ t输入[type！=复选框].eachfunction{ var o=t这； o、 val&&o.val！==o.attrvalue&&o.triggerchange } }, 100; setTimeoutfunction{ clearIntervalo }，1e4 }, attachautofilleventhandler:函数{ var o； t文档.on焦点、输入、函数{ var i=ttthis.parentsform.findinput.not[type=file]； o=设置间隔函数{ i、 每个函数{ var o=t这； o、 val！==o.attrvalue&&o.triggerchange } }, 100 }.onblur、.form组输入、函数{ clearIntervalo } }, init:functiono{ this.options=t.extend{}，this.options，o； var i=t文件； t、 fn.ripples&&this.options.ripples&&this.ripples，this.options.input&&this.input，this.attachInputEventHandlers，this.options.checkbox&&this.checkbox，this.options.togglebutton&&this.togglebutton，this.options.radio&&this.radio，this.options.autofill&&this.autofill，this.attachautofilleventhandler，document.arge&&this.options.arrive&&t.fn.ripples&&this.options.ripples&&i.arrivethis.options.withRipples，函数{ t、 这是什么材料 }，this.options.input&&i.arrivethis.options.inputElements，函数{ t、 材料，这是什么 }，this.options.checkbox&&i.arrivethis.options.checkbox元素，函数{ t、 材料.复选框t此 }，this.options.radio&&i.arrivethis.options.radioElements，函数{ t、 材料，无线电 }，this.options.togglebutton&&i.arrivethis.options.togglebuttonElements，函数{ t、 material.togglebuttontthis } } } }jQuery， 函数t，o，i，n{ 严格使用； 功能eo，i{ r=this，this.element=to，this.options=t.extend{}，s，i，this.\u defaults=s，this.\u name=a，this.init } var a=波纹， r=null， s={}； e、 prototype.init=函数{ var i=该元素； i、 onmousedown touchstart，功能n { if！r.isTouch | | mousedown！==n.type{ i、 find.ripple-container.length | i.append； var e=i.children.ripple-container， a=r.getRelYe，n， s=r.getRelXe，n； 如果a | | s{ var l=r.getRipplesColori， p=t； p、 addClassripple.css{ 左:s,， 上图：a， 背景颜色：l }，e.P， 作用{ 返回o.getComputedStylep[0]。不透明度 }，r.rippleOni，p，setTimeoutfunction{ r、 rippleEndp }，500，i.onmouseup mouseleave触摸端，功能{ p、 datamousedown，off，off==p.dataanimating&&r.rippleOutp } } } } }，e.prototype.getNewSize=functiont，o{ 返回Math.maxt.outerWidth，t.outerwight/o.outerWidth*2.5 }，e.prototype.getRelX=functiont，o{ var i=t.偏移量； 返回r.isTouch？o=o.originalEvent，1==o.touchs.length？o.touchs[0]。pageX-i.left:！1:o.pageX-i.left }，e.prototype.getRelY=functiont，o{ var i=t.偏移量； 返回r.isTouch？o=o.originalEvent，1==o.touchs.length？o.touchs[0]。pageY-i.top:！1:o.pageY-i.top }，e.prototype.getRippleColor=function{ var i=t.dataripple-color？t.dataripple-color:o.getComputedStylet[0]。颜色； 返回i }，e.prototype.hasTransitionSupport=函数{ var t=i.body | i.documentElement， o=t.style， e=o.transition！==n | | o.WebkitTransition！==n | | o.MozTransition！==n | | o.MsTransition！==n | | o.OTransition！==n； 返回e }，e.prototype.isTouch=函数{ return/Android | webOS | iPhone | iPad | iPod |黑莓| IEMobile | Opera Mini/i.testnavigator.userAgent }，e.prototype.rippleEnd=function{ t、 数据动画，关闭，关闭===t.datamousedown和&r.rippleOutt }，e.prototype.rippleOut=function{ t、 关闭，r.hasTransitionSupport？t.addClassripple-out:t.animate{ 不透明度：0 }，100，功能{ t、 触发传递 }，t.ontransitionend WebKitt TransitionEnd oTransitionEnd MSTransitionEnd，函数{ t、 除去 } }，e.prototype.rippleOn=functiont，o{ var i=r.getNewSizet，o； r、 hasTransitionSupport？o.css{ -ms变换：缩放+i+， -moz变换：缩放+i+， -webkit转换：缩放+i+， 变换：缩放+i+ }.addClassripple-on.dataanimating，on.datamousedown，on:o.animate{ 宽度：2*Math.maxt.outerWidth，t.outerHeight， 高度：2*Math.maxt.outerWidth，t.outerHeight， 左边距：-1*Math.maxt.outerWidth，t.outerHeight， 页边顶部：-1*Math.maxt.outerWidth，t.outerHeight， 不透明度：.2 }，500，功能{ o、 触发传递 } }，t.fn.ripples=函数o{ 返回this.eachfunction{ t、 datathis，plugin|a | t.datathis，plugin|a，newethis，o } } }jQuery、窗口、文档； .切换按钮{ 垂直对齐：中间对齐； } .切换按钮， .切换按钮标签， .切换按钮输入， .togglebutton.toggle{ 用户选择：无； } .切换按钮标签{ 光标：指针； 颜色：rgba0,0,0,0.26； } .form-group.is-focused.togglebutton标签{ 颜色：rgba0,0,0,0.26； } .form-group.is-focused.togglebutton标签：悬停， .form-group.is-focused.togglebutton标签：焦点{ 颜色：rgba0,0,0,54； } 字段集[已禁用].form-group.is-focused.togglebutton标签{ 颜色：rgba0,0,0,0.26； } .togglebutton标签输入[类型=复选框]{ 不透明度：0； 宽度：0； 身高：0； } .togglebutton标签。toggle{ 文本对齐：左对齐； 左边距：5px； } .togglebutton标签。toggle， .togglebutton标签输入[类型=复选框][已禁用]+.toggle{ 内容：； 显示：内联块； 宽度：35px； 高度：15px； 背景色：aeb0b5； 边界半径：15px； 右边距：15px； 过渡：背景0.3s； 垂直对齐：中间对齐； } .togglebutton标签。toggle:之前{ 内容：关； 位置：相对位置； 颜色：4a4a4a； 字体大小：9px； 左：14px； 顶部：-4.5px } .togglebutton标签。切换：在{ 内容：； 显示：内联块； 宽度：20px； 高度：20px； 背景色：F2F2； 边界半径：20px； 位置：相对位置； 盒影：0 1px 3px 1px rgba0,0,0,0.4； 左：-7px； 顶部：-23px； 过渡：左0.3s缓变，背景0.3s缓变，方框阴影0.1s缓变； } .togglebutton标签输入[type=checkbox][disabled]+.toggle:after， .togglebutton标签输入[类型=复选框][禁用]：选中+.toggle:之后{ 背景色：bdbd； } .togglebutton标签输入[类型=复选框]+.toggle:活动：之后， .togglebutton标签输入[类型=复选框][禁用]+.toggle:活动：之后{ 长方体阴影：0 1px 3px 1px rgba0,0,0.4,0 0 15px rgba0,0,0,0.1； } .togglebutton标签输入[类型=复选框]：选中+.toggle:之后{ 左：8px； } .togglebutton标签输入[类型=复选框]：选中+.toggle{ 背景色：9bdaf1； } .togglebutton标签输入[类型=复选框]：选中E d+切换：之前{ 内容：关于； 颜色：4a4a4a； 位置：相对位置； 顶部：-9px； 左：3件 } .togglebutton标签输入[类型=复选框]：选中+.toggle:之后{ 顶部：-3px； } .togglebutton标签输入[类型=复选框]：选中+.toggle:之后{ 边框颜色：00a6d2； 背景色：00a6d2； } .togglebutton标签输入[类型=复选框]：选中+.toggle:活动：之后{ 盒影：0 1px 3px 1px rgba0，0，0，0.4，0 0 15px rgba0，166，210，0.1； } 开关打开了 开关关闭

---

谢谢你的提示。查看：：before伪元素就可以了。