通過 javascript 將 className 添加到對象中創建的元素

Question

我練習 javascript。 我想將 class 名稱 ( .is-slideUp ) 添加到創建的每個card__item元素中，該元素來自數據 object，以放置向上滑動的 animation。

.is-slideUp class 名稱顯示在控制台中，但不在元素中。 試過settimeout但沒有幫助。

我希望每個都像這樣： <div class="card__item is-slideUp">然后，每個向上滾動時都會向上滑動。

有誰知道解決方案？ 謝謝你。

 const data = [ { content: [ { card: "Card Title 1", text: "Card Text 1 Card Text 1 Card Text 1" }, { card: "Card Title 2", text: "Card Text 2 Card Text 2 Card Text 2" }, { card: "Card Title 3", text: "Card Text 3 Card Text 3 Card Text 3" }, { card: "Card Title 4", text: "Card Text 4 Card Text 4 Card Text 4" }, { card: "Card Title 5", text: "Card Text 5 Card Text 5 Card Text 5" }, { card: "Card Title 6", text: "Card Text 6 Card Text 6 Card Text 6" }, ], }, ]; const output = document.querySelector(".card__output"); async function load() { const json = await data; for (let i in json) { const wrap = document.createElement("div"); wrap.className = "card__wrap"; for (let j in json[i].content) { const card = document.createElement("div"); card.className = "card__item"; const h3 = document.createElement("h3"); h3.className = "card__title"; h3.textContent = `${json[i].content[j].card}`; const p = document.createElement("p"); p.className = "card__text"; p.textContent = `${json[i].content[j].text}`; wrap.appendChild(card); card.appendChild(h3); card.appendChild(p); } output.appendChild(wrap); } } load(); slideUp(); const windowHeight = window.innerHeight; const cards = document.querySelectorAll(".card__item"); function slideUp() { window.addEventListener("scroll", function () { for (let i = 0; i < cards.length; i++) { console.log(cards[i]); if ( windowHeight > cards[i].getBoundingClientRect().top + windowHeight / 5 ) { cards[i].classList.add("is-slideUp"); } } }); }

 * { margin: 0; padding: 0; } header, footer { height: 200px; background: #ccc; }.card__output { width: 100%; height: 100%; }.card__wrap { width: 100%; display: flex; flex-wrap: wrap; flex-grow: 1; margin-left: calc(-10% / 3); }.card__item { /* opacity: 0; */ transition: all 1s; transform: translateY(200px); display: flex; flex-direction: column; width: 30%; height: 300px; margin-top: 30px; margin-left: calc(10% / 3); background: #ededed; }.card__title { margin: 1.8rem auto; font-size: 2.2rem; font-weight: bold; text-align: center; }.is-slideUp { background: pink; opacity: 1; transform: translateY(0); }

 <header>header</header> <div class="card__output"> <!--output data object--> </div> <footer>footer</footer>

Answer 1

問題是您正在嘗試將 class 添加到以“同步”方式異步創建的元素中。

將您的 javascript 修改為以下內容：

load().then((res) => {
    slideUp();
  });

  function slideUp() {
  const windowHeight = window.innerHeight;
  const cards = document.querySelectorAll(".card__item");  
    window.addEventListener("scroll", function () {

      for (let i = 0; i < cards.length; i++) {
        console.log(cards[i]);
        if ( windowHeight > cards[i].getBoundingClientRect().top + windowHeight / 5 ) {
          cards[i].classList.add("is-slideUp");
        }
      }
    });
  }

Answer 2

您可以將多個類添加為card.className = "card__item is-slideUp";