JavaScript 类列表选择器错误

Question

我收到此错误“app_copy.js:13 Uncaught TypeError:无法读取未定义的属性“删除””，并且不确定原因。当您单击第一个按钮时，我希望删除这些按钮并显示两个隐藏的按钮。为什么当我单击第一个按钮时会出现此错误？如果我使用 document.querySelector 并删除一个，它会起作用，但如果我像我在这里尝试那样使用 document.querySelectorAll 则不起作用。谢谢!

代码笔:http://codepen.io/abharms/pen/BKvYvL

HTML

<div class="wrapper">

  <a class="numberButtons first" href="#">1</a>
  <a class="numberButtons second" href="#">2</a>
  <a class="numberButtons third" href="#">3</a>

 <a class="yesNo hide" href="#">Yes</a>
 <a class="yesNo hide" href="#">No</a>
</div>

CSS

body {
background-color: #74c7d5;  
}
.wrapper {
text-align: center;
margin-top: 200px;
}
.wrapper a {
text-decoration: none;
padding: 10px 15px 10px 15px;
margin: 10px;
border: 1px solid white;
color: #9965a8;
border-radius: 5px;
}
.wrapper a:hover {
background-color: white;
color: #74c7d5;
}
.hide {
display: none;
}

JavaScript

var numberButtons = document.querySelectorAll(".numberButtons");
var yesNo = document.querySelectorAll(".yesNo");
var first = document.querySelector(".first");
var second = document.querySelector(".second");
var third = document.querySelector(".third");


function numberButtonsLoop() {
for(var i = 0; i < numberButtons.length; i++)
numberButtons[i].addEventListener("click", function(){
var clickedOption = this;
        if(clickedOption === first) {
            yesNo.classList.remove("yesNo");
            numberbuttons.classList.add("hide");
        }   
    });     
};              


numberButtonsLoop();

Answer 1

您的变量 yesNo 和 numberbuttons 各自保存从 document.querySelectorAll() 返回的 HTML 元素节点的集合，即使这些变量集合仅由一个元素组成；要从该集合中的所有元素中删除类名，您必须依次迭代每个元素节点:

if(clickedOption === first) {
    // Array.from() converts the array-like collection
    // into an Array upon which we can use the
    // Array.prototype.forEach() method to iterate over
    // the newly-formed Array:
    Array.from( yesNo ).forEach(function(element){
        element.classList.remove("yesNo");
    });
    Array.from( numberbuttons ).forEach(function(element){
        element.classList.add("hide");
    });
}