改变类名的力量

Avatar of Chris Coyier
Chris Coyier 于

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费信用额度！

人们对 “嘿，设计师们，如果你只了解 JavaScript 的一件事，我建议学习这个。” 做出了非常积极的回应，甚至 YouTube 评论 也是正面的。

Benjamin De Cock 提到，他不仅同意改变类名是网页设计师在 JavaScript 中需要掌握的最重要的事情，他还围绕这个想法构建了一个小型库。

它有一个非常不寻常的配置方式。您在标签内使用纯文本语言来告诉它在点击时要更改哪些类，例如

clicking on "h1" removes class "open" on "h1.open"
clicking on "h1" adds class "open" on "target"

这是来自该视频的“升级”演示的修改版本，使用 uilang 代替。

查看 CodePen 上 Chris Coyier (@chriscoyier) 的笔 更改内容的类名。

非常酷。

Jeremy Keith 也有一种很好的表达方式

它让我想起了旧的 jQuery 理念：找到某个东西并对其进行操作。

不过，我也会坚持我的观点。如果您想逐步学习 JavaScript，学习在没有任何库帮助的情况下选择内容并更改类名是一个很好的方法。

嘘！创建一个 DigitalOcean 账户，并获得 200 美元的免费信用额度 用于基于云的托管和服务。

评论

  1. Brad Westfall
    评论永久链接#

    是的，当我想要解释这三种技术（HTML、CSS、JS）之间的区别时，我就会教给初学者这个。有时我会用一个 div 创建一个红色的方块，当点击它时，它会变成绿色，类似于您使用切换的方式。然后我会将绿色的方块变成圆形。到目前为止，观众都在打哈欠。然后我添加了另一个属性，所有人的眼睛都亮了起来，我听到了一声明显的倒吸气声。

    transition: all 2s

    我想那是他们意识到力量的时候。

    • Brad Westfall
      评论永久链接#

      抱歉，我主要是在回复文章前半部分关于教学的内容。这个工具看起来也很棒 :)

  2. Danish
    评论永久链接#

    太疯狂了，所以我们真的可以这样写代码！
    `

    点击 "#main-nav a" 会移除 "#main-nav a.active" 上的 "active" 类

    点击 "#main-nav a" 会在 "target" 上添加 "active" 类
    “

    你能告诉我哪里可以找到这些代码命令的文档吗？太棒了，Chris！你太厉害了！

  3. Agop
    评论永久链接#

    非常棒的想法，但是为什么在标签里用英文写？至少把它放在<script type="uilang">标签里。

    或者，更好的是，通过让设计师编写类似以下内容来教授 JS 对象的基础知识

    <script>
    var autoClickClasses = [
        { on: '.foo', action: 'add', cls: 'active' },
        { on: '#bar', action: 'add', cls: 'bar', target: '#baz' }
    ];
</script>

    无需解析，开箱即用的错误消息更好，并迫使设计师掌握基础知识（编写脚本标签、打开控制台等）。

  4. Coinoperatedgoi
    评论永久链接#

    我喜欢简化成纯英文的概念。我可能会用它来开始向我的孩子介绍编码。

    当然，它并不能真正教授 JavaScript 或 jQuery，但至少它开始传达了通过代码操作元素的概念。

  5. Vasyl Terletskyi
    评论永久链接#

    太酷了

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。

© 2024 . All rights reserved.