mui的switch开关的应用

HTML:   
<!--mui的switch开关-->
            <div class="mui-content-padded">
                <h5>switch开关mui-active开启状态</h5>
                <div class="mui-switch mui-active">
                    <div class="mui-switch-handle"></div>
                </div>
            </div>
            
             <div class="mui-content-padded">
                <h5>mui-switch-blue:设置颜色</h5>
                <div class="mui-switch mui-switch-blue">
                    <div class="mui-switch-handle"></div>
                </div>
            </div>
            
            <div class="mui-content-padded">
                <h5>mui-switch-mini:无文字提示开关</h5>
                <div class="mui-switch mui-switch-blue mui-switch-mini">
                    <div class="mui-switch-handle"></div>
                </div>
            </div>
            
             <div class="mui-content-padded">
                <h5>男女性别开关</h5>
                <div class="mui-switch mui-switch-blue" id="gender">
                    <div class="mui-switch-handle"></div>
                    
                </div>
                
                <div class="mui-content-padded">
                    <p class="mui-text-center" id="msg">这里是文字提示</p>
                </div>
            </div>
            <!--点击按钮获取信息-->
            <div class="mui-content-padded">
                <button id="btn-get-gender" class="mui-btn mui-btn-blue">获取性别</button>
            </div>

JS:
监听事件函数：
document.getElementById('btn-get-gender').addEventListener('tap',function(){
            //classList.contains('mui-active'):判断类名是否包含active，如果包含表示处于打开状态（ture）
                var gender=document.getElementById('gender').classList.contains('mui-active')
                console.log(gender)//ture/false
                
                if(gender==true){
                    document.getElementById("msg").innerHTML='女'
                }else{
                    document.getElementById("msg").innerHTML='男'
                }
            })

 

 

 

 

 

转载于:https://www.cnblogs.com/Dark-fire-liehuo/p/10417859.html