无法获得具有特定类名的正确按钮数量
我想计算 div 中按钮的数量，我从 js 文件动态添加按钮。当我在浏览器上运行程序时，按钮显示正确，当我从浏览器检查代码时，所有元素和类名都是正确的。但是，当我尝试记录类名称为“手风琴”的按钮数量时，它在应该返回 4 时返回 0。
这是 HTML 代码：
<body class="d-flex justify-content-center" style="width: 100%;height: 50%;">
<div class="container" style="width: 500px;"><img src="assets/img/header_image.png" style="width: 100%;">
<div class="row" style="margin-top: 20px;">
<div id="accordion-div" class="col">
</div>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="index.js"></script>
javascript代码：
var acc = document.getElementsByClassName("accordion");
var acc_div = document.getElementById("accordion-div")
var i;
add_accordion_item = (name, details) => {
var btn = document.createElement('button');
acc_div.appendChild(btn);
btn.innerHTML = name;
btn.className += "btn btn-success accordion";
btn.type = "button"
var details = document.createElement('div');
acc_div.appendChild(details);
details.innerHTML = details
details.className += "panel"
}
url = '.....'
make_list = () => {
$.getJSON(url, function(data){
for(var i = 0; i<data["number_of_threats"]; i++){
name = data["info"][i]["name"];
details = "details"
add_accordion_item(name, details);
}
});
}
make_list()
console.log(document.getElementsByClassName("accordion").length)
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
这应该显示一个按钮，按下时它应该显示带有详细信息的 div。但是 for 从不运行，因为 acc.length 为 0。
慕尼黑85498603回答
-
繁星coding
我认为节点数组没有长度属性。你应该使用 forEach 而不是 for 循环acc.forEach(function(element) { element.addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); })我希望它能帮助你 -
猛跑小猪
我认为您没有accordion为任何元素添加一个类。因为我accordion在您的 html 代码中看不到任何具有类名的元素。但是在你的 javascriptcode 里面，在第一行你试图搜索一个类名为accordion. -
收到一只叮咚
变量acc在开始声明后不会自动更新。您将需要acc在 for 循环上方再次检索变量的值。即在 for 循环上方，您需要添加这样的行acc = document.getElementsByClassName("accordion");for (i = 0; i < acc.length; i++) {....
随时随地看视频慕课网APP
相关分类
JavaScript