jQuery Show / Hide 在 Android 上不起作用

Posted

技术标签:

【中文标题】jQuery Show / Hide 在 Android 上不起作用【英文标题】:jQuery Show / Hide doesn't work on Android 【发布时间】:2015-04-20 18:52:06 【问题描述】:

我正在使用 Phongap 和 Cordova 的移动应用程序。使用 OnsenUI。

在一个页面中,我有一个 ons-switch 元素,用于显示和隐藏一个 select html 元素。

这一点的特殊之处在于,在触摸 ons 开关时显示和隐藏选择的 js 代码在 ios(在 iPhone 5S 上测试)和 android 模拟器上运行良好,但是当我在三星上部署应用程序时Galaxy S4 (Android 4.3) 脚本不起作用,它不会隐藏/显示选择。

代码不起作用的Android版本是4.3。 phonegap 版本是 4.2.0-0.25.0。 Cordova 版本是 4.3.0。

这是我的代码:

    <ons-page>

        <ons-toolbar>
            <div class="left"><ons-back-button>Back</ons-back-button></div>
            <div class="center">MyPage</div>
        </ons-toolbar>

        <div style="text-align:center">
            <div style="margin-top:5%;width:100%;">
                <input class="text-input" id="my-input">
            </div>

            <div style="width:100%;float:left;clear:both">
                <label>Show Select 1</label>
                <ons-switch var="switch1" onchange="ShowSelect1()"></ons-switch>
                <select id="select1"></select>
            </div>

            <div>
                    <label>Show Select 2</label>
                    <ons-switch var="switch2" onchange="showSelect2()"></ons-switch>
                  <select id="select2"></select>
            </div>
</div>
    </ons-page>

我的 Js 代码:

 function ShowSelect1() 
            var item = $("#select1");
            if (switch1.isChecked()) 
                 item.show();
             else 
                item.hide();
            
        

        function ShowSelect2() 
            var item = $("#select2");
            if (switch2.isChecked()) 
                item.show();
             else 
                item.hide();
            
        

【问题讨论】:

【参考方案1】:

不要使用 jQuery hide 和 show 来做这样的事情,使用 onsen 所基于的 Angular。使用 ng-show 或 ng-hide 并将其基于范围值。您没有显示足够的代码来正确显示修复,但类似于:

<ons-switch var="switch2" ng=change="select2Hiding = !select2Hiding"></ons-switch>
<select id="select2" ng-hide="select2Hiding"></select>

在您的 html 中并删除 JS 代码...

【讨论】:

【参考方案2】:

Angular 使用的 jQuery 被用于 Angular 的 jQuery 版本覆盖。 $.hide()$.show() 都被 ng-showng-hide 覆盖。

使用这些,一切都会好起来的。

【讨论】:

以上是关于jQuery Show / Hide 在 Android 上不起作用的主要内容,如果未能解决你的问题,请参考以下文章

关于JQUERY中的hide()和show()

如何在 Jquery 中将 delay() 与 show() 和 hide() 一起使用

请教jquery的hide()和show()方法遇到的问题

jquery的hide和show方法疑问

JQuery .show() 方法在 .hide 之后不起作用

jquery $('.hide-show')slice(0,12).show() 没有正确显示 div?