使用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更改多個對象的樣式

回答

相關問題