所以我試圖將fadeInTop 類添加到帶有類影片的div 中。Javascript 無法正常作業...
控制臺回傳給我這個回傳到該行： document.querySelectorAll(".animated".classList.add(fadeInTop))
Uncaught TypeError: Cannot read properties of undefined (reading 'add')
at application.js:41:1
at Array.forEach (<anonymous>)
at IntersectionObserver.<anonymous> (application.js:39:1)
這是在 application.js 檔案中：
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if(entry.isIntersecting){
document.querySelectorAll(".animated".classList.add(fadeInTop))
}
})
})
observer.observe(document.querySelector(".containerFadeIn"))
這是來自 home.html.erb 視圖：
<main class="home-main">
<%# fist box %>
<div class="home-text-1 containerFadeIn">
<div class="row containerFadeIn">
<div class="col-md-9 d-flex animated">
<div class="vendo-logo-home">
<%= image_tag "vendo-logo.png"%>
</div>
<div>
<h1>The Future begins</h1>
<h1 > with <span class="light-blue"><strong>VENDO</strong></span></h1>
</div>
</div>
</div>
</div>
</main>
我的主要目標是在文本滾動到螢屏時使文本淡入螢屏（如果我將 fadeInTop 類添加到影片中的淡入淡出作品中）
uj5u.com熱心網友回復：
這看起來不對document.querySelectorAll(".animated".classList.add(fadeInTop))
- 如果您呼叫
document.querySelectorAll它應該回傳節點串列，因此您需要遍歷所有元素，例如：
document.querySelectorAll(".animated").forEach(element => element.classList.add("fadeInTop"))
請記住，nodelist 不是陣列，但它確實接受 forEach 方法。您可能希望將其轉換為陣列Array.from(document.querySelectorAll(".animated"))，然后呼叫 forEach 方法。
- 如果你只有一個元素，那么你可以呼叫：
document.querySelector(".animated").classList.add("fadeInTop")
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/463392.html
標籤：javascript html jQuery css 轨道上的红宝石
上一篇：Julia中OOP的替代方案