javascript - 将 jQuery 转换为 Vanilla JS 问题

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 。

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

1. 您错过了 addClass()，它是一个 jQuery 函数，对于普通 JS，请使用 .classList.add() 代替:

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

2. 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");
   }
   

3. 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>