当前位置：文江博客话题详情

如何从一组颜色的单击中更改元素的颜色

发布于 2025-02-08 00:46:45 字数 234 浏览 2 评论 0原文

假设我有一个称为太阳的矩形div。

我有4种为Div的颜色。

颜色分别为红色，绿色，蓝色和黄色。

初始颜色为红色。

我想要的是当用户单击矩形时，矩形的颜色应从红色变为绿色。再次单击时，将绿色为蓝色，因此在另一键点上，当用户再次点击时，蓝色到黄色和atlast，颜色应从黄色变为红色，并且循环应继续。我无法实现这种算法。

如果使用IF-Else树（尽管不是必需的），则应对答案表示赞赏。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

早茶月光 2025-02-15 00:46:45

就像@bravo评论一样，您可以使用JavaScript数组，并与EventListener一起添加

它，但它。

const box = document.querySelector('.box');

const listColor = ['red', 'green', 'blue', 'yellow'];

let currentColor = 1;
box.addEventListener('click', function() {
  currentColor++;
  this.style.backgroundColor = listColor[(currentColor % listColor.length)];
})

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all .3s ease;
}

<div class="box"></div>

Like @Bravo comment you can use javascript array and add with eventListener

It rought but that it.

const box = document.querySelector('.box');

const listColor = ['red', 'green', 'blue', 'yellow'];

let currentColor = 1;
box.addEventListener('click', function() {
  currentColor++;
  this.style.backgroundColor = listColor[(currentColor % listColor.length)];
})

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all .3s ease;
}

<div class="box"></div>

回复收藏 0 原文

篱下浅笙歌 2025-02-15 00:46:45

如果其他答案无济于事，这是我在评论中提出的

简单数组和索引，并使用modulo操作员将“包装”到0的数组中的索引

document.querySelector(".tgt").addEventListener(
    "click", 
    ((colours, index) => 
        e => e.target.style.backgroundColor = colours[(index = (index + 1) % colours.length)]
    )(["red", "green", "blue", "yellow"], 0)
);

<div class="tgt" style="background-color:red;height:64px;aspect-ratio:16/9">
</div>

增加的好处 - 无需全局变量

If the other answers don't help, here's what I was suggesting in the comment

a simple array and an index into the array that is "wrapped" to 0 using the modulo operator

document.querySelector(".tgt").addEventListener(
    "click", 
    ((colours, index) => 
        e => e.target.style.backgroundColor = colours[(index = (index + 1) % colours.length)]
    )(["red", "green", "blue", "yellow"], 0)
);

<div class="tgt" style="background-color:red;height:64px;aspect-ratio:16/9">
</div>

Added benefit - NO global variables required

回复收藏 0 原文

独享拥抱 2025-02-15 00:46:45

您的问题具有JS数组和索引检查的简单解决方案

// DOM Element 
const SUN = document.getElementById("sun");

// Variables
let index = 0;

// Colors 
const COLORS = ["red", "green", "blue", "yellow"];

// Handler
const initColor = () => {
  SUN.style.backgroundColor = COLORS[index];
}

const changeColor = () => {
  index++;
  if (COLORS[index]) {
    SUN.style.backgroundColor = COLORS[index];
  }
}

// Event Listeners 
window.addEventListener("DOMContentLoaded", initColor);

SUN.addEventListener("click", changeColor)

#sun {
  width: 400px;
  cursor: pointer;
  height: 200px;
  border: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
</body>
<div id="sun">

</div>
<script src="./script.js"></script>

</html>

your problem have simple solution with js arrays and index check

// DOM Element 
const SUN = document.getElementById("sun");

// Variables
let index = 0;

// Colors 
const COLORS = ["red", "green", "blue", "yellow"];

// Handler
const initColor = () => {
  SUN.style.backgroundColor = COLORS[index];
}

const changeColor = () => {
  index++;
  if (COLORS[index]) {
    SUN.style.backgroundColor = COLORS[index];
  }
}

// Event Listeners 
window.addEventListener("DOMContentLoaded", initColor);

SUN.addEventListener("click", changeColor)

#sun {
  width: 400px;
  cursor: pointer;
  height: 200px;
  border: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
</body>
<div id="sun">

</div>
<script src="./script.js"></script>

</html>

回复收藏 0 原文

~没有更多了~