Javascript 将jQuery转换为标准JS问题

我在看一个使用jQuery的教程，想把它转换成JS，但我的代码坏了——希望有人能帮我：

教程JS：

$(function() {
    var btn = $('button');
    var progressBar = $('.progressbar');

    btn.click(function() {
        progressBar.find('li.active').next().addClass('active');
    })
})

摘自网址：

下面是我使用JavaScript DOM重写jQuery的失败尝试：

var btn1 = document.getElementsByTagName('BUTTON');
var progBar = document.getElementsByClassName('progressbar');

function clickMe1() {
    var elm = progBar.querySelectorAll("li");
    var emlClass = elm.querySelector(".active");
    return emlClass.nextElementSibling.addClass('active');
}

btn1.addEventListener("click", clickMe1, false);

哪里出错了？

。querySelectorAll（“li”）

将返回一个带有一个或多个

标记的数组（或类似数组的对象）。因此，您需要：

• 循环浏览该列表中的每个
• ，然后完成其余的操作
• 或者，如果你不想担心页面中有多个li，就从列表中选择第一项
• 或者使用

  .querySelector

  （而不是

  .querySelector all

  ）为您获取第一个

经过几次更改后，您的代码将正常工作请检查以下注释：

您错过了

addClass（）

这是一个jQuery函数，对于vanilla JS，请使用

.classList.add（）

：

return emlClass.nextElementSibling.classList.add("active");

querySelectorAll（）将返回一个节点列表，您必须在其中循环并添加类，使用：

var emlClass = progBar.querySelectorAll("li.active");

而不是：

var elm = progBar.querySelectorAll("li");
var emlClass = elm.querySelector(".active");

然后循环并添加
active
类：

for(var i=0;i<emlClass.length;i++){
    emlClass[i].nextElementSibling.classList.add("active");
}

希望这有帮助

var btn1=document.getElementsByTagName（'BUTTON'）[0]；
var progBar=document.getElementsByClassName（'progressbar'）[0]；
函数clickMe1（）{
var emlClass=progBar.querySelectorAll（“li.active”）；
对于（var i=0；请详细解释。
progBar.queryselectoral（“li”）
将返回一个包含一个或多个
标记的数组。因此，您需要遍历该列表中的每个
并执行其余操作，或者如果不想担心页面中有多个li，只需从该列表中选取第一项，或者使用
.querySelector
（而不是
.querySelectorAll
）只需为您获取第一个
。您需要为每个类选择器执行此操作。此外，您将查找“li.active”而不是“li.active”，这将查找不同的元素。您可以使用
.queryselectorall（“li.active”）
而不是执行两个单独的查询。答案本身集中在导致代码无法运行的实际问题上，因此很抱歉在注释中添加了大量内容。谢谢，这确实澄清了上面jQuery中的.find（）。我不知道这是一个数组问题。谢谢大家，这确实澄清了.find（）在上面的jQuery中，我没有意识到这是一个数组问题。
var btn1 = document.getElementsByTagName('BUTTON')[0];
var progBar = document.getElementsByClassName('progressbar')[0];