javascript - HTML/CSS 设置重复元素样式的有效方法？

Question

我正在尝试制作一个只使用 vanilla Javascript 的射击游戏来获得乐趣。

我想要在我的屏幕上随机移动 10 个或更多的圆圈。 在下面的代码中，我的屏幕左侧有 10 个圆圈列表，它们的颜色和大小都相同，只是位置不同。 这是我的 HTML:

body {
  width: 100vw;
  height: 100vh;
}
.circle {
/*
  position: absolute;
  top: 1px;
*/
  width: 50px;
  height: 50px;
  color: transparent;
  border: 2px solid red;
  border-radius: 50%;
}

.circle:nth-child(1) {
position: absolute;
top: 1px;
}

.circle:nth-child(2) {
position: absolute;
top: 60px;
}

.circle:nth-child(3) {
position: absolute;
top: 120px;
}

.circle:nth-child(4) {
position: absolute;
top: 180px;
}

.circle:nth-child(5) {
position: absolute;
top: 240px;
}

.circle:nth-child(6) {
position: absolute;
top: 300px;
}

.circle:nth-child(7) {
position: absolute;
top: 360px;
}

.circle:nth-child(8) {
position: absolute;
top: 420px;
}

.circle:nth-child(9) {
position: absolute;
top: 480px;
}

.circle:nth-child(10) {
position: absolute;
top: 540px;
}

<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>


    

我是前端技术的新手。有没有比这更好的设计圆圈的有效方法？如果我喜欢屏幕上有 100 个圆圈，我不想创建 100 个类并一个一个地设置它们的样式...

谢谢

Answer 1

最简单的答案是，查看您的代码，使用 JavaScript 的 NodeList.prototype.forEach():

// using document.querySelectorAll() to find all elements
// matching the supplied CSS selector, and then
// NodeList.prototype.forEach() to iterate over each Node
// of that NodeList:
document.querySelectorAll('.circle').forEach(

    // using an Arrow function expression;
    // 'circle': a reference to the current Node of the NodeList,
    // 'index': the index of the current Node in the NodeList:
    // here we set the circle.style.top property to be equal to
    // the result of 60 * index concatenated with the 'px' unit:
    (circle, index) => circle.style.top = 60 * index + 'px'
);

document.querySelectorAll('.circle').forEach(
    (circle, index) => circle.style.top = 60 * index + 'px'
);

body {
  width: 100vw;
  height: 100vh;
}
.circle {
  position: absolute;
  width: 50px;
  height: 50px;
  color: transparent;
  border: 2px solid red;
  border-radius: 50%;
}

<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

诚然，这确实放置了第一个 .circle 元素及其 top: 0px 而不是 1px，因此完全可以修改上面的内容使用 top: 1px 显式设置 .circle 元素样式的方法，然后使用 JavaScript 设置除第一个之外的所有 .circle 元素的样式:

document.querySelectorAll('.circle + .circle').forEach(
    (circle, index) => circle.style.top = 60 + (60 * index) + 'px'
);

document.querySelectorAll('.circle + .circle').forEach(
    (circle, index) => circle.style.top = 60 + (60 * index) + 'px'
);

body {
  width: 100vw;
  height: 100vh;
}
.circle {
  position: absolute;
  top: 1px;
  width: 50px;
  height: 50px;
  color: transparent;
  border: 2px solid red;
  border-radius: 50%;
}

<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

除此之外，使用 Vue 等模板语言(这仍然涉及 JavaScript):

// for something so simple Vue is - almost certainly -
// overkill, however: Vue is initialised (in this very
// simple case) as follows:
new Vue({

  // 'el' takes a CSS selector to identify the
  // elements in, or upon, which Vue should run:
  'el': '.wrapper'
});

*,
 ::before,
 ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.circle {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #f00;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div class="wrapper">
  <!--
    here we define the element that will be repeated,
    to repeat the element we use the v-for attribute,
    here we use the 'i in 10' (i is the current number,
    starting at 1, 10 is the end of the range); to adjust
    the 'style' attribute, we preface the attribute with
    the ':' character, and within that attribute we use:
      `top: ${i * 60 - 60)px`
    this is a JavaScript template literal syntax, in which
    the 'i * 60 - 60' wrapped by '${...}' is interpolated
    by Vue to generate the relevant values
  -->
  <div class="circle" v-for="i in 10" :style="`top: ${i * 60 - 60}px`"></div>
</div>