Question

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

在一个页面中，我有一个ons-switch元素，用于显示和隐藏选择的html元素。

这一点的特殊之处在于，触摸ons-switch时显示和隐藏选择的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();
            }
        }

Answer 1

不要使用jQuery隐藏和显示这样的东西，使用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代码......

Answer 2

Angular使用的jQuery被一个用于Angular目的的jQuery版本覆盖。 $.hide()和$.show()都会覆盖ng-show和ng-hide。

使用这些，一切都会正常。

jQuery Show / Hide在Android上不起作用

2 个答案: