多个元素使用相同的 css 类，如何仅更改其中一个元素的 css 属性

Question

I am creating a little game that should be like a 2d version of "guitar hero" (if you don't know what "guitar hero" is don't worry, it was just to give context).我正在创建一个小游戏，它应该像“吉他英雄”的二维版本（如果您不知道“吉他英雄”是什么，请不要担心，这只是为了提供上下文）。 I have a red square creator function called squareCreator that adds each new square created a CSS class of .newMostLeftNote .我有一个名为squareCreator的红色方块创建器函数，它添加每个new方块创建一个 CSS 类.newMostLeftNote 。 Afterward, I want each one of those squares to fall down (like gravity) using the function fallingMostLeftNote .之后，我希望使用功能fallingMostLeftNote将这些方块中的每一个都倒下（就像重力一样）。 The problem is that the margin-top that function adds to the square generated by the squareCreator adds to every single square at the same time (even before the square is created), so a square could be created when the .newMostLeftNote CSS class has a margin-top of 700 and it appears way at the bottom.问题是该函数添加到squareCreator生成的正方形的margin-top squareCreator添加到每个正方形（甚至在创建正方形之前），因此当.newMostLeftNote CSS 类具有margin-top 为 700，它出现在底部。

How can I make it so that every square that falls, but starts falling after they appear?我怎样才能做到让每一个下降的方块，但在它们出现后开始下降？

Notice that in this image, every margin-top CSS property for every new generated square is exactly the same.请注意，在此图像中，每个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>

Update更新

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

Instead of using javascript to update your margin-top, you could use CSS animations .您可以使用CSS 动画，而不是使用 javascript 来更新您的边距顶部。 Each new square will animate independently.每个新方块都将独立动画。

Here's an example for your use case:以下是您的用例的示例：

 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

My approach is giving a css variable while creating divs for transform delay.我的方法是在为转换延迟创建 div 的同时给出一个 css 变量。 If you need more complex movements, you can use the same logic for animation instead of transform.如果您需要更复杂的动作，您可以使用相同的动画逻辑而不是变换。

<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