使用"无显示"隐藏列表标记不起作用

我正在使用 telerik platfom 使用HTML，CSS和JavaScript进行应用。我对HTML代码有一些疑问。

<body>
 <li>
  switch on/off<input data-role="switch" checked="checked" data-change="onChange"/>
 </li>
 <li class="switch-on">
  end:<input type="time" id="switch-on-end-time"></input>
 </li>
 <li class="switch-off" style="display:none">
  start:<input type="time" id="switch-off-start-time"></input>
 </li>
 <li class="switch-off" style="display:none">
  end:<input type="time" id="switch-off-end-time"></input>
 </li>
 <script>
 function onChange (e) {
    isSwitchOn = e.checked;
    const switchOff = document.getElementsByClassName('switch-off');
    const switchOn = document.getElementsByClassName('switch-on');
    if(e.checked) {
        for (let el of switchOff) {
            el.style.display = 'none';
        }
        for (let el of switchOn) {
            el.style.display = 'list-item'
        }
    } else {
        for (let el of switchOn) {
            el.style.display = 'none';
        }
        for (let el of switchOff) {
            el.style.display = 'list-item'
        }
    }
 }
 </script>
</body>

当我使用Telerik仿真设备时，它运行良好，但是当我在手机中执行（iPhone 6-版本10.21.1）时，它不起作用。具体来说，当我关闭按钮时，没有任何更改，这意味着显示属性不会更改。这只是电话问题还是我有一些错误？

看起来，您在代码中犯了一个错误。尝试更改此问题：

<li>
switch on/off<input data-role="switch" checked="checked" data-change="onChange"/>
</li>

：

<li>
<input data-role="switch" checked="checked" data-change="onChange">switch on/off</input>
</li>

我还没有测试过， - 我不是100％确定就是这样。它可能在计算机浏览器（而不是在您的电话浏览器上）工作，因为计算机浏览器仍然更加聪明。

但是您可以尝试安装IE6，然后什么都没有用，所以我想这不仅仅是在iPhone上。： - ）

相关内容

最新更新

热门标签：