jQuery 显示/隐藏在 Android 上不起作用
jQuery Show / Hide doesn't work on Android
我正在 Phongap 和 Cordova 中使用移动应用程序。使用 OnsenUI.
在一个页面中,我有一个 ons-switch 元素,它显示和隐藏 select html 元素。
这个的特殊之处在于,当触摸 ons-switch 时显示和隐藏 select 的 js 代码在 iOS 上工作正常(在 iPhone 5S 上测试)和在 Android 模拟器上,但是当我在我的 Samsung Galaxy S4 (Android 4.3) 上部署应用程序时,脚本不起作用,它不会 hide/show select .
代码不起作用的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();
}
}
不要使用 jQuery 隐藏和显示这样的东西,使用温泉所基于的 Angular。使用 ng-show 或 ng-hide 并将其基于范围值。您没有显示足够多的代码来正确显示修复,但是类似于:
<ons-switch var="switch2" ng=change="select2Hiding = !select2Hiding"></ons-switch>
<select id="select2" ng-hide="select2Hiding"></select>
在您的 html 中删除 JS 代码...
为了 Angular 的目的,Angular 使用的 jQuery 被 jQuery 的版本覆盖。 $.hide()
和 $.show()
都被 ng-show
和 ng-hide
覆盖。
使用这些,一切都会正常。
我正在 Phongap 和 Cordova 中使用移动应用程序。使用 OnsenUI.
在一个页面中,我有一个 ons-switch 元素,它显示和隐藏 select html 元素。
这个的特殊之处在于,当触摸 ons-switch 时显示和隐藏 select 的 js 代码在 iOS 上工作正常(在 iPhone 5S 上测试)和在 Android 模拟器上,但是当我在我的 Samsung Galaxy S4 (Android 4.3) 上部署应用程序时,脚本不起作用,它不会 hide/show select .
代码不起作用的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();
}
}
不要使用 jQuery 隐藏和显示这样的东西,使用温泉所基于的 Angular。使用 ng-show 或 ng-hide 并将其基于范围值。您没有显示足够多的代码来正确显示修复,但是类似于:
<ons-switch var="switch2" ng=change="select2Hiding = !select2Hiding"></ons-switch>
<select id="select2" ng-hide="select2Hiding"></select>
在您的 html 中删除 JS 代码...
为了 Angular 的目的,Angular 使用的 jQuery 被 jQuery 的版本覆盖。 $.hide()
和 $.show()
都被 ng-show
和 ng-hide
覆盖。
使用这些,一切都会正常。