我无法解决 Uncaught TypeError: 无法读取 Change 事件的未定义属性（读取“remove”）
2022-07-27
3604
我需要对图标进行更改，将类 .fa-plus 更改为 .fa-minus，用于此菜单
<div class="accordion-menu">
<h2 class="accordion-header" id="subseccOne">
<button class="accordion-button-m" type="button" >
<i class="fa-solid fa-plus" data-bs-toggle="collapse" data-bs-target="#subsecollapseOne" aria-expanded="true" aria-controls="subsecollapseOne"></i> <a class="item-section" href="">SEGUNDO NIVEL </a>
</button>
</h2>
<div id="subsecollapseOne" class="accordion-collapse collapse" aria-labelledby="subseccOne" data-bs-parent="#subsecc">
<div class="accordion-body">
<div class="accordion" id="accordionExample">
<div class="accordion-menu">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button-m" type="button" >
<i class="fa-solid fa-plus" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" ></i> <a class="item-section" href=""> TERCER NIVEL </a>
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-menu">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button-m collapsed" type="button" >
<i class="fa-solid fa-plus" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></i> <a class="item-section" href=""> TERCER NIVEL </a>
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-menu">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button-m collapsed" type="button" >
<i class="fa-solid fa-plus" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"></i> <a class="item-section" href=""> TERCER NIVEL </a>
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我的 JavaScript 函数是这个
const icon= document.querySelectorAll(".fa-solid");
const plusIcon = document.querySelectorAll(".fa-plus");
for (i =0; i < plusIcon.length; i++){
plusIcon[i].addEventListener("click", function (){
icon.classList.remove("fa-plus");
icon.classList.add("fa-minus")
});
}
我不知道为什么控制台会打印此错误，当单击事件在该函数上运行时
menu_funcionalidad.js:29 未捕获的 TypeError：无法读取 HTMLElement 中未定义的属性（读取“remove”）。
2个回答
您收到错误是因为您已将
icon
分配给
nodeList
，因此当尝试更改类时，
icon
不是单个元素。我建议使用
event.target
来操作已点击的元素。
const icon= document.querySelectorAll(".fa-solid");
const plusIcon = document.querySelectorAll(".fa-plus");
for (i =0; i < plusIcon.length; i++){
plusIcon[i].addEventListener("click", e => {
e.target.classList.remove("fa-plus");
e.target.classList.add("fa-minus");
plusIcon.forEach(item => {
if (item !== e.target) item.classList.add('//class-name');
});
});
}
Sarah
2022-07-27
document.querySelectorAll(".fa-solid")
将返回一个 nodeList，这意味着当您尝试访问循环内的
classList
时，您是在尝试访问
nodeList
的
classList
，而这是不可能的。
如果您想添加/删除该节点列表中每个项目的图标，则可以使用
.forEach()
对该列表进行迭代（更多信息请参见
此处
）。
如果您想从您
当前
正在迭代的元素中添加/删除图标，请将
icon.classList...
替换为
i.classList
。
如果第二条路线是什么你正在寻找，你也可以在循环内添加一个检查，例如：
for (i =0; i < plusIcon.length; i++){
plusIcon[i].addEventListener("click", function (){
if (i.classList.contains("fa-plus") {
icon.classList.remove("fa-plus");
} else
icon.classList.add("fa-minus");
}
});
}
McCambley
2022-07-27