离子应用程序，单击按钮不起作用
[英]ionic app ,on click of a button not work
问题描述
I am developing an app and this is second screen where i am getting problem. 
我正在开发一个应用程序，这是我遇到问题的第二个屏幕。 There is a skip button and when i press it the "div containing text in it " should hide . 有一个跳过按钮，当我按下它时，“其中包含文本的div”应该隐藏。
I have written codes in typescript file "home.ts" and have written html of it it in home.html and css in home.css 我已经在打字稿文件“ home.ts”中编写了代码，并且在home.html中编写了它的html，并在home.css中编写了CSS。
there are only 2 screens i have done with these codes,one is splash screen and other one is disclaimer or home screen where i am trying to hide the div with text on click of skip button 我用这些代码完成的屏幕只有2个，一个是启动屏幕，另一个是免责声明或主屏幕，我要在单击跳过按钮时用文本隐藏div
Here is home.ts code: 这是home.ts代码：
import { Component,ViewChild} from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl:'home.html'
})
export class HomePage {
@ViewChild('username')username;
@ViewChild('password')password;
splash = true;
constructor(public navCtrl: NavController ) {
}
showhide(){
var toggle = function() {
var mydiv = document.getElementById('div');
if (mydiv.style.display === 'block' || mydiv.style.display === ''){
mydiv.style.display = 'none';
}
else{
mydiv.style.display = 'block';
}
}
}
ionViewDidLoad() {
setTimeout(() => this.splash = false, 4000);
}
}
and here is home.html file
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="lib/jquery-1.11.1.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<script src="js/show.js"></script>
<script src="build/animation.css"></script>
</head>
<body ng-controller="imageshow_hide">
<ion-content>
<div id="custom-overlay"[style.display]="splash ? 'flex': 'none'">
<div class="flb">
<div class="Aligner-item Aligner-item--top">
</div>
<img src="assets/logo.png">
<div class="Aligner-item Aligner-item--bottom">
</div>
</div>
</div>
<div class="scroll-content">
<img class="image1" src="assets/bg2.jpg"/>
<div id="hides" class="image2"><img src="assets/whitetop.png"/>
<h2 style="text-align:center">WHY SHOULD I USE THIS APP
</h2>
<p>Our thoughts and everything we see feel hear taste and smell
shapes the unconscious mind.
By listening to affirmations daily.guided meditation and performing simple NLP techniques
you can re-program your mind to focus on the results you desire in life and develop
positive patterns for motivation and action
</p>
</div>
<div id="hides" class="image3"><img src="assets/whitebottom.png"/>
<h2 style="text-align:center">HOW TO USE THIS APP</h2>
<p>Don't listen to any of these recordings
while operating machinery or driving.only listen to these materials if you
are in safe place where you can relax.
All contents provided within their applications are NOT meant to replace
any qualified medical treatment or health related advice.
If you suffer from any mental disorder,NOT Listen to this material.
MindVolution accepts No responsibility or liability for any injury,loss or damage
as direct or indirect result of the usage of the information here presented.
</p>
</div>
<button (click)="showhide()" id="hides">
<img class="image4" ng-hide="checked" src="assets/skip.png"/>
</button>
<img class="image5"src="assets/sound icon.png"/>
<img class="image6"src="assets/sound icon.png"/>
</div>
</ion-content>
</body>
</html>
2 个解决方案
解决方案1
0 2017-11-14 13:25:40
you are looking for a div with id "div" and there isn't any in your html, did you intend to use id "hidden"? 您正在寻找ID为“ div”的div，而您的html中没有任何内容，您是否打算使用ID为“ hidden”？ Then your code should be var mydiv = document.getElementById('hidden') . 然后，您的代码应为var mydiv = document.getElementById('hidden') 。
A simpler way to achieve this is to create a boolean variable in your home.ts, eg isVisible, use *ngIf on the tags you want to depend on it's value to show or not, and then update it's value once the user clicks on the button. 一种简单的实现方法是在home.ts中创建一个布尔变量，例如isVisible，在要显示或不显示其值的标签上使用* ngIf，然后在用户单击该值时更新其值。按钮。 eg 例如
<div *ngIf="isVisible">Content to hide when user clicks the button</div>
<button (click)="isVisible = !isVisible;"></button>
To hide the splash screen is a good practice to use this.platform.ready().then(()={this.splashScreen.hide();}); 隐藏初始屏幕是使用this.platform.ready().then(()={this.splashScreen.hide();});的好习惯this.platform.ready().then(()={this.splashScreen.hide();}); , by the way, you don't seem to be importing and using the splash screen native plugin, you are just giving a value to the variable splash. ，顺便说一句，您似乎并没有导入和使用启动画面本机插件，而只是给变量splash提供了一个值。
解决方案2
0 已采纳 2017-11-15 06:33:27
I am using this in my home.ts file
showhide(){
var toggle = function() {
var mydiv = document.getElementById('hidden');
if (mydiv.style.display === 'block' || mydiv.style.display === ''){
mydiv.style.display ='none';
}
else{
mydiv.style.display ='block';
}
}
}
Hidden is the id of two divs which i want to hide on click of button ( this button has an image inside it).this button has id =skipbtn
Here is html code of skip button where user will press to hide the tow divs containing image
<button click="showhide()" >
<img class="image4" id="skipbtn" ng-hide="checked" src="assets/skip.png"/>
</button>
Here are two divs which need to be hide on click of skip button
<div class="scroll-content">
<img class="image1" src="assets/bg2.jpg"/>
<div id="hidden" class="image2"><img src="assets/whitetop.png"/>
<h2 style="text-align:center">WHY SHOULD I USE THIS APP
</h2>
<p>Our thoughts and everything we see feel hear taste and smell
shapes the unconscious mind.
By listening to affirmations daily.guided meditation and performing simple NLP techniques
you can re-program your mind to focus on the results you desire in life and develop
positive patterns for motivation and action
</p>
</div>
<div id="hidden" class="image3"><img src="assets/whitebottom.png"/>
<h2 style="text-align:center">HOW TO USE THIS APP</h2>
<p>Don't listen to any of these recordings
while operating machinery or driving.only listen to these materials if you
are in safe place where you can relax.
All contents provided within their applications are NOT meant to replace
any qualified medical treatment or health related advice.
If you suffer from any mental disorder,NOT Listen to this material.
MindVolution accepts No responsibility or liability for any injury,loss or damage
as direct or indirect result of the usage of the information here presented.
</p>
</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.