javascript - 能再简单点吗？

Question

我写了一个简单的 JavaScript 程序，但我想知道是否有可能写得更简单？用 ES6+？但只能使用 vanila JavaScript，不能使用 jQuery 或其他库/框架。提前感谢建议的解决方案。

const red = document.getElementById('circleOne');
const green = document.getElementById('circleTwo');
const blue = document.getElementById('circleThree');

red.addEventListener("mouseover", () => {
  red.style.backgroundColor = "red";
});

red.addEventListener("mouseout", () => {
  red.style.backgroundColor = "white";
});

green.addEventListener("mouseover", () => {
  green.style.backgroundColor = "green";
  red.style.backgroundColor = "green";
});

green.addEventListener("mouseout", () => {
  green.style.backgroundColor = "white";
  red.style.backgroundColor = "white";
});

blue.addEventListener("mouseover", () => {
  green.style.backgroundColor = "blue";
  red.style.backgroundColor = "blue";
  blue.style.backgroundColor = "blue";
});

blue.addEventListener("mouseout", () => {
  green.style.backgroundColor = "white";
  red.style.backgroundColor = "white";
  blue.style.backgroundColor = "white";
});

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

section {
  margin: 100px auto 0 auto;
  max-width: 700px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

section .circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid #333;
  margin: 0 auto;
  cursor: pointer;
}

<section>
  <div id="circleOne" class="circle"></div>
  <div id="circleTwo" class="circle"></div>
  <div id="circleThree" class="circle"></div>
</section>

提前感谢建议的解决方案。

Answer 1

这里有一个选项:制作一个接受元素数组并设置它们的每个背景的函数，并向容器添加一个 mouseout 监听器，将所有元素设置为白色。不需要 ID，您可以使用 querySelectorAll 和解构将每个圆快速放入一个变量中:

const bgcolorAll = (arr, color) => arr.forEach(elm => elm.style.backgroundColor = color);
const section = document.querySelector('section');
section.addEventListener('mouseout', () => {
  bgcolorAll([red, green, blue], 'white');
});

const [red, green, blue] = document.querySelectorAll('section > div');

red.addEventListener("mouseover", () => {
  bgcolorAll([red], 'red');
});

green.addEventListener("mouseover", () => {
  bgcolorAll([red, green], 'green');
});

blue.addEventListener("mouseover", () => {
  bgcolorAll([red, green, blue], 'blue');
});

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

section {
  margin: 100px auto 0 auto;
  max-width: 700px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

section .circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid #333;
  margin: 0 auto;
  cursor: pointer;
}

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

或者，更 DRY，根本不选择单个圆圈，而是使用数组:

const bgcolorAll = (arr, color) => arr.forEach(elm => elm.style.backgroundColor = color);
const section = document.querySelector('section');
const circles = [...document.querySelectorAll('section > div')];
section.addEventListener('mouseout', () => {
  bgcolorAll(circles, 'white');
});

const colors = ['red', 'green', 'blue'];
section.addEventListener('mouseover', ({ target }) => {
  if (target.matches('.circle')) {
    const index = circles.indexOf(target)
    bgcolorAll(
      circles.slice(0, index + 1),
      colors[index]
    );
  }
});

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

section {
  margin: 100px auto 0 auto;
  max-width: 700px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

section .circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid #333;
  margin: 0 auto;
  cursor: pointer;
}

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

您也可以仅使用 CSS 实现此目的:

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

section {
  margin: 100px auto 0 auto;
  max-width: 700px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: 'red green blue';
}

section .circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid #333;
  margin: 0 auto;
  cursor: pointer;
}

.circle:nth-child(1) {
  grid-area: blue;
}
.circle:nth-child(1):hover,
.circle:nth-child(1):hover ~ .circle:nth-child(2),
.circle:nth-child(1):hover ~ .circle:nth-child(3) {
  background-color: blue;
}

.circle:nth-child(2) {
  grid-area: green;
}
.circle:nth-child(2):hover,
.circle:nth-child(2):hover ~ .circle:nth-child(3) {
  background-color: green;
}

.circle:nth-child(3) {
  grid-area: red;
}
.circle:nth-child(3):hover {
  background-color: red;
}

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