Question

我正在观看一个使用jQuery的教程并想把它变成JS，但是我的代码坏了 - 希望有人可以帮我解决这个问题：

教程JS：

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

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

取自网址：http://www.kodhus.com/kodity/codify/kod/mGXAtb

这是我尝试使用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);

我哪里出错？

Answer 1

<强> Working fiddle

您的代码将在多次更改后运行，请查看以下注释：

你错过了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");
}

getElementsByTagName()和getElementsByClassName()也将返回具有给定名称的节点列表，您必须指定要选择的节点（在我的示例中选择第一个）：
```
var btn1 = document.getElementsByTagName('BUTTON')[0];
var progBar = document.getElementsByClassName('progressbar')[0];
```

希望这有帮助。

var btn1 = document.getElementsByTagName('BUTTON')[0];
var progBar = document.getElementsByClassName('progressbar')[0];

function clickMe1() {
  var emlClass = progBar.querySelectorAll("li.active");
  
  for(var i=0;i<emlClass.length;i++){
    emlClass[i].nextElementSibling.classList.add("active");
  }
}

btn1.addEventListener("click", clickMe1, false);

.container {
  width: 100%;
}

.progressbar {
  counter-reset: step;
  margin: 0;
  margin-top: 50px;
  padding: 0;
}

.progressbar li {
  list-style-type: none;
  float: left;
  width: 33.33%;
  position: relative;
  text-align: center;
}

.progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #ddd;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
}

.progressbar li:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #ddd;
  top: 15px;
  left: -50%;
  z-index: -1;
}

.progressbar li:first-child:after {
  content: none;
}

.progressbar li.active {
  color: green;
}

.progressbar li.active:before {
  border-color: green;
}

.progressbar li.active + li:after {
  background-color: green;
}
button {
  position: relative;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 2px;
  left: 50%;
  margin-top: 30px;
  transform: translate(-50%);
  cursor: pointer;
  outline: none;
}
button:hover {
  opacity: 0.8;
}

<div class="container">
  <ul class="progressbar">
    <li class="active">Step 1</li>
    <li>Step 2</li>
    <li>Step 3</li>
  </ul>
</div>
<button>Next step</button>

Answer 2

.querySelectorAll("li")将返回一个数组（或类似数组的对象），其中包含一个或多个＆lt; li＆gt;标签。所以你需要：

遍历每个＆lt; li＆gt;在该列表中完成其余的工作，
或者如果您不想担心页面中有多个li，请从该列表中选择第一项，
或使用.querySelector（不是.querySelectorAll）来获取第一个＆lt; li＆gt;为你。

MDN

将jQuery转换为Vanilla JS问题

2 个答案: