我正在开发一个应用程序，这是我遇到问题的第二个屏幕。 有一个跳过按钮，当我按下它时，“包含文本的div”应该隐藏。
我在打字稿文件“home.ts”中编写了代码，并在home.html中编写了html，在home.css中编写了css
这些代码只有2个屏幕，一个是启动画面，另一个是免责声明或主屏幕，我试图用点击跳过按钮隐藏文本div
这是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>
答案 0 :(得分：0)
你正在寻找一个id为＃div; div＆＃34;你的html中没有任何内容，你打算使用id＆＃34; hidden＆＃34 ;?那么你的代码应该是var mydiv = document.getElementById('hidden')。
实现此目的的一种更简单的方法是在home.ts中创建一个布尔变量，例如： isVisible，在你要依赖它的标签上使用* ngIf显示与否，然后在用户点击按钮后更新它的值。 例如
<div *ngIf="isVisible">Content to hide when user clicks the button</div>
<button (click)="isVisible = !isVisible;"></button>
隐藏启动画面是一种使用this.platform.ready().then(()={this.splashScreen.hide();});的好习惯，顺便说一下，您似乎没有导入和使用启动画面原生插件，您只是给了一个值变量飞溅。
答案 1 :(得分：0)
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>