TypeError: addClass 不是 JavaScript 中的函数

TypeError: addClass is not a function in JavaScript

出现“addClass is not a function”错误的原因有多种：

在不是一组 jQuery 元素的值上调用函数。
拼写addClass错误（区分大小写）。
将 JS 脚本标记放在声明 DOM 元素的 HTML 代码之上。
在同一页面上多次加载 jQuery。

typeerror addclass 不是一个函数

下面是错误如何发生的示例。

索引.js


const box = document.getElementById('box');

// ⛔️ Uncaught TypeError: box.addClass is not a function
box.addClass('blue');

addClass我们在 DOM 元素而不是一组 jQuery 元素上调用该方法。

要解决“addClass 不是函数”错误，请确保
在声明 DOM 元素并加载 jQuery 后，addClass在一组 jQuery 元素上调用该方法并将 JS 脚本标记放在标记的底部。body

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">Box</div>

    <!-- ✅ load jQuery ✅ -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!-- ✅ Your JS script here ✅ -->
    <script src="index.js"></script>
  </body>
</html>

请注意，我们在标记index.js底部加载了 jQuery 和我们自己的脚本 ( )。body

顺序很重要，因为如果我们在声明之前加载脚本，我们将无法访问文件中的元素。 divindex.js

这是 JS 文件的代码。

索引.js


const box = $('#box');

console.log(box); // 👉️ [div#box]

// ✅ works
box.addClass('blue');

我们使用 jQuery 函数选择 ID 为的元素，box并使用该addClass方法向其添加类。

如果我们选择了多个元素，例如使用类选择器，我们会将类添加到所有匹配的元素。

例如，如果我们有以下 DOM 元素：

索引.html


<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

并选择具有以下类别的元素box：

索引.js


const box = $('.box');

console.log(box); // 👉️ [div.box, div.box, div.box]

box.addClass('blue');

该addClass方法将类添加到每个类名为的 DOM 元素box。

如果错误仍然存在，请确保拼写addClass 正确，因为它区分大小写。

加载脚本的顺序非常重要。您只需加载 jQuery 脚本一次，并确保在运行 JavaScript 代码之前加载它。

如果您的代码在加载 jQuery 之前运行，则您无法在代码中使用 jQuery 提供的任何功能。

结论

要解决“addClass 不是函数”错误，请确保
在声明 DOM 元素并加载 jQuery 后，addClass在一组 jQuery 元素上调用该方法并将 JS 脚本标记放在标记的底部。body

–