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

Z时代
2024-01-10
分类：问答

我使用WordPress创建网站，因此内容是动态创建的。元素ID也被动态生成使用javascript更改多个对象的样式

每个容器可以具有这些元素（一个容器可以有多个 - 但不相同）：
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>

回答：

您可以使用有作为第一个容器 - 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>