1. 程式人生 > >通過JS設定MUI中Switch開關的狀態

通過JS設定MUI中Switch開關的狀態

MUI官方文件中只說了toggle()函式可以切換開關的狀態,並未提及如何通過js直接設定開關的初始狀態。實際上開關是否開啟,是通過開關div上的mui-active樣式類來控制的,即如果有這個樣式類則開關處於開啟狀態,否則為關閉。於是可以通過JS維護classList即可,HTML程式碼如下:

<div class="mui-switch mui-switch-blue mui-switch-mini" id="vibrationSwitch">
    <div class="mui-switch-handle"></div>
</div
>

JS程式碼如下:

if (isSwitchOn)
{
    document.getElementById("vibrationSwitch").classList.add('mui-active');
}
else
{
    document.getElementById("vibrationSwitch").classList.remove('mui-active');
}

話說,MUI官方文件總是感覺不那麼細緻,遇到官方文件中未提及的情況時,我們只能自己去多加分析和嘗試了。