Question

我收到此错误＆＃34; app_copy.js：13未捕获的TypeError：无法读取属性＆＃39;删除＆＃39;未定义＆＃34;我不知道为什么。当您单击第一个按钮时，我希望删除这些按钮并显示两个隐藏按钮。单击第一个按钮时为什么会出现此错误？它可以工作，如果我使用document.querySelector并删除一个，但不是如果我使用document.querySelectorAll像我试图在这里做。谢谢！

Codepen：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");
    });
}

Answer 2

由于查询选择器返回一个元素数组（因为您通过className选择），因此在删除/添加类时需要遍历数组中的所有元素。

将此类名称添加到numberButtons和yesNo元素时出现此错误。我已在我的代码段中修复了这两项内容。

＆＃13;

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) {
      for(var i=0; i<yesNo.length; i++) {
        yesNo[i].classList.remove("yesNo");
      }
      for(var i=0; i<numberButtons.length; i++) {
        numberButtons[i].classList.add("hide");
      }
    }   
  });     
};              


numberButtonsLoop();

＆＃13;

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;
}

＆＃13;

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

＆＃13;

JavaScript类列表选择器错误

2 个答案: