锐客网

  1. 首页 > 睿知 > it技术 > >

「网易官方」极客战记（codecombat）攻略-网页开发2-消失活动-disappearing-act

IT知识网易网页网页开发

非淡泊无以明志，非宁静无以致远。这篇文章主要讲述「网易官方」极客战记（codecombat）攻略-网页开发2-消失活动-disappearing-act相关的知识，希望能为你提供帮助。

「网易官方」极客战记（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"/>   本攻略发于极客战记官方教学栏目，原文地址为：
https://codecombat.163.com/news/jikezhanji-xiaoshihuodong
【「网易官方」极客战记（codecombat）攻略-网页开发2-消失活动-disappearing-act】极客战记— — 学编程，用玩的！

    推荐阅读


    上一篇：Appium自动化 - 可定位的控件属性

    下一篇：观点（微信小程序是APP红利时代最明确的分水岭）