「网易官方」极客战记(codecombat)攻略-网页开发2-消失活动-disappearing-act
Posted 极客战记
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了「网易官方」极客战记(codecombat)攻略-网页开发2-消失活动-disappearing-act相关的知识,希望对你有一定的参考价值。
(点击图片进入关卡)
使元素消失和出现!惊吓你的敌人,迷惑你的朋友。
简介
show() 和 hide() 这两个jQuery函数分别让元素出现和消失。
默认代码
<!-- javascript可以用来显示和隐藏元素! -->
<script>
var showButton = $("#showButton");
// 创建变量‘hideButton‘来存储#hideButton
var image = $("#image");
function showElement() {
image.show();
}
function hideElement() {
// 在图像变量上使用“hide()”函数:
}
showButton.on("click", showElement);
// 添加一个事件监听器到hideButton变量。
// 当“点击”发生时,它应该执行HielEng:
</script>
<style>
body {
text-align:center;
}
button {
width:25%;
height:64px;
}
img {
width:50%;
}
</style>
<button id="showButton">显示</button>
<button id="hideButton">隐藏</button>
<br>
<img id="image"
src="http://direct.codecombat.com/file/db/thang.type
/57586f0a22179b2800efda37/portrait.png"/>
概览
#隐藏并显示
在元素上调用 hide() 会使元素从屏幕上消失!
与此相反, show() 则会让元素按照隐藏前的样子重新出现。 (除非在隐藏时进行过更改!)
挂接到 "click" 事件则可以为需要的隐藏和显示行为编写强大的脚本!
消失活动 解法
<!-- JavaScript可以用来显示和隐藏元素! -->
<script>
var showButton = $("#showButton");
// 创建变量‘hideButton‘来存储#hideButton
var hideButton = $("#hideButton");
var image = $("#image");
function showElement() {
image.show();
}
function hideElement() {
// 在图像变量上使用“hide()”函数:
image.hide()
}
showButton.on("click", showElement);
// 添加一个事件监听器到hideButton变量。
// 当“点击”发生时,它应该执行HielEng:
hideButton.on("click", hideElement);
</script>
<style>
body {
text-align:center;
}
button {
width:25%;
height:64px;
}
img {
width:50%;
}
</style>
<button id="showButton">显示</button>
<button id="hideButton">隐藏</button>
<br>
<img id="image"
src="http://direct.codecombat.com/file/db/thang.type
/57586f0a22179b2800efda37/portrait.png"/>
以上是关于「网易官方」极客战记(codecombat)攻略-网页开发2-消失活动-disappearing-act的主要内容,如果未能解决你的问题,请参考以下文章
网易官方极客战记(codecombat)攻略-森林-村庄守护者
网易官方极客战记(codecombat)攻略-森林-If 的盛宴
「网易官方」极客战记(codecombat)攻略-游戏开发2-越狱-jailbreak
「网易官方」极客战记(codecombat)攻略-森林-小心陷阱