繁体   English   中英

隐藏不显示的列表标签不起作用

[英]hiding list tag with display none doesn't work

我正在使用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)中执行该命令时,它不起作用。 具体来说,当我关闭按钮时,没有任何变化,这意味着display属性没有变化。 这是唯一的电话问题,还是我有一些错误?

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

<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上。 :-)

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM