「网易官方」极客战记（codecombat）攻略-网页开发2-转换-toggulation

2021-02-20 10:19

阅读：426

标签：-- ali get 解法极客 https size codec header

(点击图片进入关卡)

toggleClass，打开和关闭类，在页面中增进交互性！

简介

toggleClass（）函数分别根据元素的类是否存在来添加和删除一个类。

默认代码

var image = $("img");

var header = $("h1");

function toggleExpand() {

image.toggleClass("expand");

// 通过使用我们刚刚创建的首位变量，在‘h1‘标签上切换"expand”类

}

image.on("click", toggleExpand);

// 在‘header‘上使用‘.on（“click”）‘来调用toggleExpand：

body {

text-align:center;

}

.expand {

width:100%;

font-size:4em;

}

臭名昭著的P.U.G.

src="http://www.soscw.com/file/db/thang.type/577d5d4dab818b210046b3bf/portrait.png"/>

点击Pugicorn

概览

toggleClass

toggleClass() 用于打开和关闭特定的类。你可以把它想象成一盏灯的开关（on/off）。它可以添加（on）类，或者移除（off）类，具体取决于当前的状态是（off）还是（on）。

这适用于特定类型的选择器，例如列表清单或巨大哈巴狗的脸。

转换解法

var image = $("img");

var header = $("h1");

function toggleExpand() {

image.toggleClass("expand");

// 通过使用我们刚刚创建的首位变量，在‘h1‘标签上切换"expand”类

header.toggleClass("expand");

}

image.on("click", toggleExpand);

// 在‘header‘上使用‘.on（“click”）‘来调用toggleExpand：

header.on("click", toggleExpand);

body {

text-align:center;

}

.expand {

width:100%;

font-size:4em;

}

臭名昭著的P.U.G.

src="http://www.soscw.com/file/db/thang.type/577d5d4dab818b210046b3bf/portrait.png"/>

点击Pugicorn

本攻略发于极客战记官方教学栏目，原文地址为：

https://codecombat.163.com/news/jikezhanji-zhuanhuan

极客战记——学编程，用玩的！

「网易官方」极客战记（codecombat）攻略-网页开发2-转换-toggulation

标签：-- ali get 解法极客 https size codec header

原文地址：https://www.cnblogs.com/codecombat/p/12918841.html

上一篇：2019-2020-2 20175234 赵诗玥《网络对抗技术》Exp 8 Web基础

下一篇：js中 fetch请求，以及随机数

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：「网易官方」极客战记（codecombat）攻略-网页开发2-转换-toggulation
文章链接：http://soscw.com/index.php/essay/57936.html

亲，登录后才可以留言！

「网易官方」极客战记（codecombat）攻略-网页开发2-转换-toggulation

简介

默认代码

臭名昭著的P.U.G.

概览

toggleClass

转换解法

臭名昭著的P.U.G.

评论

热门文章

推荐文章

最新文章

置顶文章

「网易官方」极客战记（codecombat）攻略-网页开发2-转换-toggulation

简介

默认代码

臭名昭著的P.U.G.

概览

toggleClass

转换 解法

臭名昭著的P.U.G.

评论

热门文章

推荐文章

最新文章

置顶文章

转换解法