JavaScript 中 TypeError: removeClass is not a function 错误
出现“TypeError: removeClass is not a function”错误的原因有多种:
- 在不是一组 jQuery 元素的值上调用函数。
-
拼写错误的
removeClass
(区分大小写)。 - 将 JS 脚本标记放在声明 DOM 元素的 HTML 代码之上。
- 在同一页面上多次加载 jQuery。
下面是产生上述错误的示例
const box = document.getElementById('box');
// ⛔️ Uncaught TypeError: box.removeClass is not a function
box.removeClass('blue');
我们在 DOM 元素而不是一组 jQuery 元素上调用了 removeClass
方法。
要解决“removeClass is not a function”错误,请确保在声明 DOM 元素并加载 jQuery 后,对一组 jQuery 元素调用 removeClass
方法并将 JS 脚本标记放在 body 标记的底部 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="box" class="blue">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>
请注意
,我们在 body 标记的底部加载了 jQuery 和我们自己的脚本 (index.js)。
顺序很重要,因为如果我们在声明 div 之前加载脚本,我们将无法访问 index.js 文件中的元素。
这是 JS 文件的代码。
const box = $('#box');
console.log(box); // 👉️ [div#box]
// ✅ works
box.removeClass('blue');
我们使用 jQuery 函数选择 id 为 box 的元素,并使用 removeClass
方法从中删除蓝色类。
如果我们选择了多个元素,例如 使用类选择器,我们将从所有匹配的元素中删除该类。
例如,如果我们有以下 DOM 元素:
<div class="box blue">Box 1</div>
<div class="box blue">Box 2</div>
<div class="box blue">Box 3</div>
并选择了具有 box
类的元素:
const box = $('.box');
console.log(box); // 👉️ [div.box, div.box, div.box]
box.removeClass('blue');
removeClass
方法从类名为 box 的每个 DOM 元素中删除类。
如果错误仍然存在,请确保您正确拼写了
removeClass
,因为它区分大小写。
我们加载脚本的顺序很重要。
我们只需加载 jQuery 脚本一次,并确保在运行 JavaScript 代码之前加载它。
如果我们的代码在加载 jQuery 之前运行,则我们无法在代码中使用 jQuery 提供的任何功能。
总结
**要解决“removeClass is not a function”错误,请确保在声明 DOM 元素并加载 jQuery 后,对一组 jQuery 元素调用 removeClass
方法并将 JS 脚本标记放在 body 标记的底部 ** 。
相关文章
Do you understand JavaScript closures?
发布时间:2025/02/21 浏览次数:108 分类:JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间:2025/02/21 浏览次数:178 分类:JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间:2025/02/21 浏览次数:150 分类:JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
如何在 JavaScript 中合并两个数组而不出现重复的情况
发布时间:2024/03/23 浏览次数:86 分类:JavaScript
-
本教程介绍了如何在 JavaScript 中合并两个数组,以及如何删除任何重复的数组。