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

我使用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>

来源

2016-08-24 iwan

你想要做什么动画？在我看来，你只是希望内容总是在屏幕上，这与使用位置相同：用css修复 – juvian

您可以将一个类（https://codex.wordpress.org/Function_Reference/post_class）添加到每个容器并只针对该CSS类。没有必要摆弄ID。 – Shilly

对不起，我不能格式化它.. 我想所有t_1有这个： 'document.getElementById（“t_1”）。style.top = scroll * -0.2 +'px';' 所有的f_1都有： ''document.getElementById（“t_1”）。style.top = scroll * -0.4 +'px';' 第二个容器将在下一页 'document.getElementById（“t_1”）。style.top = windowheight * 1 + scroll * -0.2 +'px';' 所有的f_1都有： 'document.getElementById（“t_1”）。style.top = windowheight * 1 + scroll * -0.4 +'px';' – iwan

您可以使用有作为第一个容器 - 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按照您的需求量的。

来源

2016-08-24 15:25:50

谢谢，但我不想使用外部库也想要的元素更改每个滚动移动的位置 – iwan

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

回答

相关问题