Question

你好，我有这个问题。当我单击第一个元素p时，颜色更改为红色，如果我在第一个元素p之后单击第二个元素p，则颜色将为绿色，但我想要红色。我想产生这种效果：如果单击第一个元素p，它将为红色；如果单击第二个元素p，则将为红色。我认为我的JavaScript代码有误，该怎么办才能达到这种效果？谢谢大家的帮助

var clicked = true;

function change(abba) {
  if (clicked) {
    abba.style.color = "red";
  } else {
    abba.style.color = "green";
  }
  clicked = !clicked;
}

<p onclick="change(this)">HELLO WORLD</p>
<p onclick="change(this)">HELLO WORLD</p>
<p onclick="change(this)">HELLO WORLD</p>
<p onclick="change(this)">HELLO WORLD</p>

Answer 1

如果要切换文本颜色，可以检查当前颜色是否为红色，如果是，则将颜色分配为绿色，否则设置为红色。

function change(abba) {
  abba.style.color = abba.style.color === "red" ? "green" : "red";
}

<p onclick="change(this)">HELLO WORLD</p>
<p onclick="change(this)">HELLO WORLD</p>
<p onclick="change(this)">HELLO WORLD</p>
<p onclick="change(this)">HELLO WORLD</p>

Answer 2

在您的代码中<optional>true</optional>是一个公共变量，意味着每个元素都相同。最简单的方法是检查元素的当前颜色

compileOnly

clicked

如何通过onclick获得两个不同事件？

2 个答案: