Question

我正在使用此代码在单击时更改div的背景颜色：

<script>
function myFunction() {
document.getElementById("myIdHere").style.backgroundColor = "red";
}
</script>

...这个工作正常，但如果我再次点击它，我希望它能改变为另一种颜色。

此外，我想将此功能应用于多个div。当我点击它们而不是相互依赖时，它们都应该改变颜色。有没有一种好方法可以做到这一点，还是我必须为每个div分配一个唯一的Id并创建多个函数？我尝试过使用getElementByClass，但这并没有解决我的问题。

谢谢！

Answer 1

您可以创建一个颜色名称的数组，用于索引的变量和结束数组条件。索引变量 i 应该在另一个脚本文件中或在函数外部声明。

var colors = {"red", "green", "blue"}; 
if (i == 3)
   i = 0;

document.getElementById("myIdHere").style.backgroundColor = colors[i];
i++;

我希望这个解决方案会有所帮助。

Answer 2

您可以创建一个包含所有内容的对象。这是一个工作示例：https://jsfiddle.net/avzoqroa/

HTML：

<div id="first">
  click 1
</div>

<div id="second">
  click 2
</div>

使用Javascript：

var colorSwapper = function(id) {

  this.element = document.getElementById(id);
  this.position = 0;
  this.colors = ["red", "purple", "blue"];

  this.swapColor = function() {
    this.element.style.backgroundColor = this.colors[this.position];
    this.position = (this.position + 1) % this.colors.length;
  }

    //bind event listener for click
  this.element.addEventListener("click", this.swapColor.bind(this));
}

var colorSwapper1 = new colorSwapper("first");
var colorSwapper2 = new colorSwapper("second");

Javascript可多次点击，结果不同

2 个答案: