如何将指定jQuery代码转为原生JS？解决Codepen中$ is undefined错误

嗨，这个问题我熟！让我一步步帮你解决～

错误原因 #

你碰到的$ is undefined错误本质很简单：$是jQuery的专属别名，而你的Codepen项目里没有加载jQuery库！浏览器根本不知道$代表什么，自然就抛出这个错误啦。

修复方法（继续使用jQuery） #

要让这段jQuery代码正常运行，只需要给Codepen项目添加上jQuery库就行：

• 打开Codepen的「Settings」（设置）按钮，切换到「JavaScript」标签页
• 在「Add External Scripts/Pens」的搜索框里输入「jQuery」，选择一个稳定版本添加进去；或者直接在HTML区域的<head>或<body>末尾引入jQuery的官方CDN脚本
• 添加上之后，你原来的jQuery代码：

  $('div').on('click', function() { $(this).toggleClass('show-description'); });
  

  就能正常工作，点击div就能切换show-description类啦。

原生JavaScript替代方案（无需依赖jQuery） #

如果不想用jQuery，也可以用原生JS实现完全相同的功能，代码如下：

// 获取页面中所有的div元素
const allDivs = document.querySelectorAll('div');

// 给每个div绑定点击事件
allDivs.forEach(div => {
  div.addEventListener('click', function() {
    // 切换show-description类
    this.classList.toggle('show-description');
  });
});

这段代码的逻辑和jQuery版本完全匹配：

• document.querySelectorAll('div')对应jQuery的$('div')，用来获取所有div元素
• addEventListener('click', ...)对应jQuery的.on('click', ...)，用来绑定点击事件
• classList.toggle('show-description')对应jQuery的.toggleClass('show-description')，用来切换元素的类名

内容的提问来源于stack exchange，提问作者Sophiesu