将DOM事件添加到多个元素并影响孩子的风格

Question

我是javascript的新手，并且遇到了一个我无法找到解决方案的问题。我的孩子''''''''''''''''''''''''''''''''''''''''''''''我想模拟一种情况，每当我点击''details''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，所以你可以看到我也必须使用children的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事件监听器使其工作或任何其他更好的解决方案？

Answer 1

你能试试下面的例子吗？

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> 

Answer 2

试试这个：

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>