Question

我正在使用WordPress创建网站，因此内容是动态创建的。元素ID也是动态生成的

每个容器都可以有这些元素（容器可以有多个 - 但不一样）：
T_1
F_1
F_2
F_3

我还在元素ID的末尾添加容器计数，因此每个元素都有一个唯一的ID

让我们说PHP会生成这样的HTML：

<div id="container_1">
  <div id=f_1_1>
    //content
  </div>
  <div id=f_2_1>
    //content
  </div>
</div>
<div id="container_2">
  <div id=t_1_2>
    //content
  </div>
</div>
<div id="container_3">
  <div id=f_1_3>
    //content
  </div>
</div>

我想在用户滚动时动画这些元素的位置，我添加了javascript来执行此操作：

var scroll = window.pageYOffset;
window.addEventListener('scroll', function() {
    scroll = window.pageYOffset;
    requestAnimationFrame(scroll)
}, false)

function scroll() {
    document.getElementById("f_1_1").style.top = scroll * 10 + 'px';
}

所以这就是问题，我不知道ID应该获得哪些元素。
我考虑制作一个循环，我在其中检查每个容器中的元素，但是我认为它会使用太多资源，并且因为每次用户滚动时函数都会运行，所以会很滞后。

我尝试的另一个解决方案是动态地将javascript添加到每个容器中，因此我确切地知道动画需要哪些元素。它只适用于第一个容器，因为当我添加下一个容器时，有多个函数使用相同的名称并且只执行了最后一个函数

<div id="container_1">
  <div id=f_1_1>
    //content
  </div>
  <script type="text/javascript">
    function scroll() {
      document.getElementById("f_1_"+<?php echo $pagecounter?>).style.top = scroll * 10 + 'px';
    }
  </script>
</div>

Answer 1

当元素进入视口时，您可以使用 - WOW.js来制作动画。

<div id="container_1">
  <div id=f_1_1 class="wow myCustomAnimation">
    //content
  </div>
  <div id=f_2_1 class="wow myCustomAnimation">
    //content
  </div>
</div>
<div id="container_2">
  <div id=t_1_2 class="wow myCustomAnimation">
    //content
  </div>
</div>
<div id="container_3">
  <div id=f_1_3 class="wow myCustomAnimation">
    //content
  </div>
</div>

根据您的要求，您必须写myCustomAnimation。

使用javascript更改多个对象的样式

1 个答案: