JavaScript 类列表选择器错误

Posted 2023-02-25

【中文标题】JavaScript 类列表选择器错误

【英文标题】：JavaScript classlist selector error

【发布时间】：2016-05-11 10:42:58

【问题描述】：

我收到此错误“app_copy.js:13 Uncaught TypeError: Cannot read property 'remove' of undefined”，不知道为什么。当您单击第一个按钮时，我希望删除这些按钮并显示两个隐藏的按钮。为什么单击第一个按钮时出现此错误？如果我使用 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();

【问题讨论】：

(clickedOption === 'first') - 使用报价。

querySelectorAll: manipulating nodes的可能重复

【参考方案1】：

您的变量 yesNo 和 numberbuttons，每个都包含从 document.querySelectorAll() 返回的 HTML 元素节点集合，即使这些集合仅包含一个元素；要从该集合中的 all 元素中删除类名，您必须依次遍历每个元素节点：

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");
    );

【讨论】：

不客气，很高兴能为您提供帮助！ :)

【参考方案2】：

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

向 numberButtons 和 yesNo 元素添加类名时都会出现此错误。我已经在我的 sn-p 中修复了这两个问题。

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();

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;

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