多個元素使用相同的 css 類，如何僅更改其中一個元素的 css 屬性

Question

我正在創建一個小游戲，它應該像“吉他英雄”的二維版本（如果您不知道“吉他英雄”是什么，請不要擔心，這只是為了提供上下文）。 我有一個名為squareCreator的紅色方塊創建器函數，它添加每個new方塊創建一個 CSS 類.newMostLeftNote 。 之后，我希望使用功能fallingMostLeftNote將這些方塊中的每一個都倒下（就像重力一樣）。 問題是該函數添加到squareCreator生成的正方形的margin-top squareCreator添加到每個正方形（甚至在創建正方形之前），因此當.newMostLeftNote CSS 類具有margin-top 為 700，它出現在底部。

我怎樣才能做到讓每一個下降的方塊，但在它們出現后開始下降？

請注意，在此圖像中，每個new生成的正方形的每個margin-top CSS 屬性都完全相同。

 var mostLeftNoteMarginTop = 0; function squareCreator(){ var newNote = document.createElement("div"); newNote.className = "newMostLeftNote"; document.body.appendChild(newNote); } var generationSpeed = setInterval(squareCreator, 300); function fallingMostLeftNote() { mostLeftNoteMarginTop += 2; $(".newMostLeftNote").css({ 'margin-top': mostLeftNoteMarginTop + 'px' }); } proc = setInterval(fallingMostLeftNote, 5);

 .newMostLeftNote { height: 100px; width: 100px; background-color: red; margin-left: 400px; position: absolute; } .mostLeftNote { height: 100px; width: 100px; background-color: red; margin-left: 300px; position: absolute; } .middleNote { height: 100px; width: 100px; background-color: blue; margin-left: 600px; position: absolute; } .mostRightNote { height: 100px; width: 100px; background-color: green; margin-left: 900px; position: absolute; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Score: 0</h1> <div class="middleNote"></div> <div class="mostLeftNote"></div> <div class="mostRightNote"></div> <div class="scoreLineTop"></div> <div class="scoreLineButtom"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="main.js" charset="utf-8"></script> </body>

更新

var squareQuantity = [];


function squareCreator(){
  var newNote = document.createElement("div");
  newNote.className = "newMostLeftNote";
  document.body.appendChild(newNote);
  squareQuantity.push(this.newNote);
}

var generationSpeed = setInterval(squareCreator, 300);


function fallingMostLeftNote() {
  mostLeftNoteMarginTop += 2;
  squareQuantity[2].css({
    'margin-top': mostLeftNoteMarginTop + 'px'
  });
}

Answer 1

您可以使用CSS 動畫，而不是使用 javascript 來更新您的邊距頂部。 每個新方塊都將獨立動畫。

以下是您的用例的示例：

 function addSquare() { var squaresElement = document.getElementById("squares"); var squareElement = document.createElement("div"); squareElement.className = "square"; squaresElement.append(squareElement); }

 #squares { display: flex; } .square { height: 100px; width: 100px; margin-right: 10px; background-color: red; animation-name: fall; animation-duration: 4s; animation-timing-function: linear; } /* The animation code */ @keyframes fall { from {margin-top: 0px;} to {margin-top: 300px;} }

 <button onclick="addSquare()">Add square</button> <div id="squares"></div>

Answer 2

我的方法是在為轉換延遲創建 div 的同時給出一個 css 變量。 如果您需要更復雜的動作，您可以使用相同的動畫邏輯而不是變換。

<div class="parent"></div>

.parent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.lets-try {
  flex: 1;
  background: #000;
  height: 60px;
  margin-right: 5px;
  margin-left: 5px;
  transition: all 0.5s ease-in-out var(--delay);
}

.lets-try.is-falling {
  margin-top: 100px;
}

let parent = document.querySelector(".parent");
let numOfSquares = 12;
for (let i = 0; i < numOfSquares ; i++) {
  let delay = i * 0.2;
  let div = document.createElement('div');
  div.setAttribute('class', 'lets-try');
  div.setAttribute('style', `--delay:${delay}s`);
  parent.appendChild(div);
}
setTimeout(() => {
  let items = document.querySelectorAll(".lets-try");
  [...items].forEach(item => {
    item.classList.add("is-falling")
  })
}, 1)

多個元素使用相同的 css 類，如何僅更改其中一個元素的 css 屬性

問題描述

2 個解決方案

解決方案1
0 2020-10-07 18:50:14

解決方案2
0 2020-10-07 19:39:05

多個元素使用相同的 css 類，如何僅更改其中一個元素的 css 屬性

問題描述

2 個解決方案

解決方案1 0 2020-10-07 18:50:14

解決方案2 0 2020-10-07 19:39:05

解決方案1
0 2020-10-07 18:50:14

解決方案2
0 2020-10-07 19:39:05