我尝试添加一个类到一个随机按钮，但.addClass()是不工作，并显示我一个错误，当我尝试使用Vanilla JS classList.add()一切工作正常。
const button = $('.btn');
const sound = $('.audio');
const wrongSound = $('.audio-wrong');
let randomNumber = Math.floor(Math.random() * 4);
button.on('click', () => {
startGame();
});
const startGame = () => {
console.log(button);
console.log(randomNumber);
button[randomNumber].toggleClass("pressed");
}Vanilla JS正在工作，但是jQuery向我显示了一个错误。
2条答案
按热度按时间iyzzxitl1#
toggleClass()方法用于向元素添加类或从元素中删除类，具体取决于元素是否已经具有该类。在代码中，您尝试对使用索引而不是jQuery对象选择的元素使用toggleClass()。要解决此问题，可以使用
eq()方法选择指定索引处的元素作为jQuery对象，如下所示：或者，可以使用
get()方法获取指定索引处的元素作为DOM元素，然后使用addClass()方法添加类：这两种方法都允许您使用jQuery将类添加到所需的元素中。
np8igboo2#
∮ ∮ ∮
关于jQuery需要记住的一件重要事情是jQuery对象（例如
$(selectorString)）不是本机DOM对象（例如document.querySelector(selectorString)）。这意味着jQuery方法和属性将不与DOM对象一起起作用，并且这同样适用于与jQuery对象不兼容的本地DOMAPI方法和属性。jQuery对象是元素的集合，但不是数组。正如alisait的answer中所指出的，下面这行代码是您的罪魁祸首：这部分：
button[randomNumber]也是这样的：$(".btn")[randomNumber]。任何时候括号符号被添加到jQuery对象后，它就会被取消引用到DOM对象中，因此.toggleClass()失败。仅供参考，还有一种取消引用jQuery对象的替代方法：另一个问题是
randomNumber在调用函数startGame()之外，但在闭包之内，因此每次调用startGame()时randomNumber的值都是相同的，要在每次调用startGame()时得到不同的值，请在startGame()中定义randomNumber。一个一个二个一个一个一个三个一个一个一个一个一个四个一个