向多个元素添加DOM-event对儿童风格的影响
向多个元素添加DOM-event对儿童风格的影响
提问于 2019-03-07 22:40:48
我是javascript的新手，正在为一个我无法找到解决方案的问题而苦苦挣扎。我有几个带有类“详细信息”的div，它们的子类是“扩展器-底层”。我想模拟这样一种情况:每当我点击“详细信息”div时，它的孩子的高度就会从0变为550px。我知道如何使用div的id对单个元素执行此操作，但我不想重复代码，为每个元素设置特定的id并为其分配函数。我想用几行代码来使用类名；
下面是两个div的代码：
<div class="details">
Details
<div class="expander-bottom" style="height: 0px;" onclick="clickDiv()">
<div class="text-prices">
<h1>Prices:</h1> <br>
Small: 5$<br>
Medium: 7$<br>
Large: 10$
</div>
</div>
</div>
<div class="details">
Details
<div class="expander-bottom" style="height: 0px;" onclick="clickDiv()">
<div class="text-prices">
<h1>Prices:</h1> <br>
Small: 6$<br>
Medium: 8$<br>
Large: 11$
</div>
</div>
</div> 对于单个元素，我的javascript代码使用id而不是class，所以如您所见，我还必须使用孩子的id：
function clickDiv(){
var a = document.getElementById("expander-bottom");
if(a.style.height=="0px"){
a.style.height = "550px";
}
else if(a.style.height>="0px"){
a.style.height = "0px";
}
} 所以它适用于一个元素，为了使它适用于其他元素，我需要为父元素和子元素分配特定的id，并复制与元素数量相同的函数。
我尝试使用eventListeners编写如下代码：
var parents = document.getElementsByClassName("details");
var childrens = document.getElementsByClassName("expander-bottom");
for(var i=0;i<parents.length;i++){
parents[i].addEventListener('click', function(){
if(childrens[i].style.height=="0px"){
childrens[i].style.height = "550px";
}
else if(childrens[i].style.height>="0px"){
childrens[i].style.height = "0px";
}
}, false);
}但它似乎不起作用。有没有可能在这种情况下使用DOM事件侦听器来使其工作，或者其他更好的解决方案？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-03-08 00:21:09
你能试一下下面的例子吗？
const detailsElements = document.querySelectorAll(".details");
for (let i = 0; i < detailsElements.length; i++) {
detailsElements[i].addEventListener("click", function () {
let child = this.querySelector('.expander-bottom');
if (child.style.height == "0px") {
child.style.height = "550px";
}
else if (child.style.height >= "0px") {
child.style.height = "0px";
}
});
}.details{
height: 200px;
}<div class="details">
Details
<div class="expander-bottom" style="height: 0px;" >
<div class="text-prices">
<h1>Prices:</h1> <br>
Small: 5$<br>
Medium: 7$<br>
Large: 10$
</div>
</div>
</div>
<div class="details">
Details
<div class="expander-bottom" style="height: 550px;">
<div class="text-prices">
<h1>Prices:</h1> <br>
Small: 6$<br>
Medium: 8$<br>
Large: 11$
</div>
</div>
</div>
Stack Overflow用户
发布于 2019-03-07 22:48:44
试试这个：
var parents = document.getElementsByClassName("details");
var childrens = document.getElementsByClassName("expander-bottom");
for(var i=0;i<parents.length;i++){
(function(i){
parents[i].addEventListener('click', function(){
if(childrens[i].style.height=="0px"){
childrens[i].style.height = "550px";
}
else if(childrens[i].style.height>="0px"){
childrens[i].style.height = "0px";
}
}, false);
})(i)
}另外，别忘了在这里关闭你的div类<div class="details>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55046424
复制相关文章
相似问题
腾讯云开发者
