如何将此 jquery 代码转换为 JavaScript？

Question

这是下面的jquery代码：

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

我想将其转换为 JavaScript，因为我收到此错误消息：

“$ 未定义”

当我将 jquery 代码放在 codepen.io 的 JavaScript 部分时。

jquery 代码是否有产生错误的原因？ 我怎样才能解决这个问题？ 如果无法修复，如何将 Jquery 代码转换为 JavaScript？

单击 div 时，我试图在所有 div 上使用 toggleClass。

这里是 codepen 的链接以供参考： https ://codepen.io/sophiesucode/pen/jOExXKw

Answer 1

• 选项 1：使用应该将 jquery 库推送到</body>之上，这是您的演示

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

• 选项 2：使用纯 javascript，如下所示

document.querySelector('div').onclick = function(){
  this.classList.toggle("show-description");
};

Answer 2

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

可以用 vanilla javascript 表示为：

var divs = document.querySelectorAll('div'); //Get a list of all div elements
for (const div of divs){ //Loops through every div element
    div.onclick = function(e) {  //Adds the on click function to each
        e.currentTarget.classList.toggle('show-description'); //Defines the function as toggling a class on the element of the click function
    }
}

Jquery 代码实际上是 javascript。 Jquery 是一个为 javascript 构建的库。 要解决错误“$ 未定义”，您必须将 jquery 添加到您的网页，或将其导入您的脚本中。

W3 Schools 上有一篇精彩的文章，其中介绍了将 jquery 添加到网页的多种方法。

Answer 3

您的代码不起作用，因为您将脚本路径链接为相对路径。

改变这个<script src="/assets/jquery.js"></script>

进入这个<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

另一种方法是使用 codepen 中的设置菜单链接 jquery 文件。

设置 > Javascript > 然后在 CDN 搜索栏中搜索 jquery