多个元素使用相同的 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