Question

我是javascript新手，正为一个找不到解决方案的问题而苦苦挣扎。我很少有div类别为“ detail”的类，其子级为“ expander-bottom”。我想模拟一种情况，每当我单击“详细信息” 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而不是类，因此您可以看到我还必须使用儿童的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);
}

但是它似乎不起作用。是否可以在Thins Case中使用DOM事件侦听器以使其正常工作或提供其他更好的解决方案？

Answer 1

尝试一下：

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 class="details>

处关闭div类

Answer 2

能否请您尝试以下示例。

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>

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

2 个答案: