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

Posted 2021-02-18 codecombat

(点击图片进入关卡)

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

简介

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

默认代码

<!-- ‘toggleClass‘jQuery函数打开/关闭 -->

<!-- ...类是否关闭/开启 -->

 

<script>

    var image = $("img");

    var header = $("h1");

    function toggleExpand() {

        image.toggleClass("expand");

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

    }

    image.on("click", toggleExpand);

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

 

</script>

<style>

    body {

        text-align:center;

    }

    .expand {

        width:100%;

        font-size:4em;

    }

</style>

<h1>臭名昭著的P.U.G. </h1>

<br>

<img

src="/file/db/thang.type/577d5d4dab818b210046b3bf/portrait.png"/>

<br>

点击Pugicorn

概览

toggleClass

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

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

转换 解法

<!-- ‘toggleClass‘jQuery函数打开/关闭 -->

<!-- ...类是否关闭/开启 -->

 

<script>

    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);

</script>

<style>

    body {

        text-align:center;

    }

    .expand {

        width:100%;

        font-size:4em;

    }

</style>

<h1>臭名昭著的P.U.G. </h1>

<br>

<img

src="/file/db/thang.type/577d5d4dab818b210046b3bf/portrait.png"/>

<br>

点击Pugicorn

 

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

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

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