Javascript在具有相同类但变量不同的多个div中运行函数答案

【问题标题】：Javascript run function inside multiple divs with the same class but different variablesJavascript在具有相同类但变量不同的多个div中运行函数
【发布时间】：2021-07-30 10:15:32
【问题描述】：

我正在尝试在滚动时使用相同类的多个容器 div 中运行相同的函数。

我需要为每个容器计算不同的值并将它们用于该特定功能。问题是我需要使用类，而且我不知道每个页面将有多少个容器。

这是我的html：

   <div class="div-container container">
      <div class="div-inside"></div>
      <div class="div-inside-2"></div>
      <div class="div-inside"></div>
      <div class="div-inside-2"></div>
   </div>
    

   <div class="div-container container">
      <div class="div-inside"></div>
      <div class="div-inside-2"></div>
      <div class="div-inside"></div>
      <div class="div-inside-2"></div>
   </div>

    
   <div class="div-container container">
      <div class="div-inside"></div>
      <div class="div-inside-2"></div>
      <div class="div-inside"></div>
      <div class="div-inside-2"></div>
   </div>

这就是我正在尝试的

var p1 = document.getElementsByClassName('div-inside')

    function moveDivinside() {

      const divcont = document.querySelectorAll('.div-container')
      divcont.forEach(element => {

        let marginWintop = element.getBoundingClientRect().top; 
        let winHeight = window.innerHeight;
        let difference = winHeight - (winHeight - marginWintop);

                let p1n;
                for (p1n = 0; p1n < p1.length; p1n++) {
                    p1[p1n].style.top = difference * .09 + 'px';
                }
        });
    }
    window.addEventListener('scroll', function () {
            requestAnimationFrame(moveDivinside)
    }, false)

它似乎只从最后一个容器中获取数据。

【问题讨论】：

标签： javascript html css loops multiple-instances

【解决方案1】：

你需要稍微改变你的代码：

// this line needs to go: 
// var p1 = document.getElementsByClassName('div-inside')
function moveDivinside() {
  const divcont = document.querySelectorAll('.div-container');
  divcont.forEach(element => {
    // you need to select the elements inside the current element
    var p1 = element.getElementsByClassName('div-inside');

    let marginWinTop = element.getBoundingClientRect().top;
    let winHeight = window.innerHeight;
    let difference = winHeight - (winHeight - marginWinTop);

    let p1n;
    for (p1n = 0; p1n < p1.length; p1n++) {
      p1[p1n].style.top = difference * 0.09 + 'px';
    }
  });
}

【讨论】：