在 onClick() 样式之间来回切换 - 切换案例

Question

在这个页面上：

http://javascript.drawyourpets.com/

每次用户单击按钮时，我都会尝试在样式之间来回切换。

我正在使用来自this solution 的代码的开关盒：

function changeColor() {
  let theToggle = document.getElementById("change-color");
  theToggle.toggleStatus = "on";
  switch (theToggle.toggleStatus) {
    case "on":
      theToggle.toggleStatus = "off";
      theToggle.style.color = "purple";
      theToggle.style.backgroundColor = "yellow";
      break;
    case "off":
      theToggle.toggleStatus = "on";
      theToggle.style.color = "yellow";
      theToggle.style.backgroundColor = "purple";
      break;
  }
}

#change-color {
  width: 100px;
  height: 100px;
  color: yellow;
  background-color: purple
}

<div class="column">
  <button id="change-color" onclick="changeColor()">Change Color</button>
</div>

这会在第一次改变背景颜色，但它只工作一次 - 它应该在每次点击时改变。

我对switch-cases不是很熟悉，可能有什么问题？

Answer 1

您的 html 元素中没有 toggleStatus。一种方法是 jQuery 的 toggleClass();，或者如果你想在纯 js 中实现，你可以添加一个名为 status 的 data 属性来控制你的 switch case。

这是 纯 javascript 中可能的方法之一。

function changeColor() {
  let theToggle = document.getElementById("change-color");
  let toggleStatus = theToggle.dataset.status;
  switch (toggleStatus) {
    case "on":
      theToggle.dataset.status = "off";
      theToggle.style.color = "purple";
      theToggle.style.backgroundColor = "yellow";
      break;
    case "off":
      theToggle.dataset.status = "on";
      theToggle.style.color = "yellow";
      theToggle.style.backgroundColor = "purple";
      break;
  }
}

#change-color {
  width: 100px;
  height: 100px;
  color: yellow;
  background-color: purple
}

<div class="column">
  <button id="change-color" data-status="on" onclick="changeColor()">Change Color</button>
</div>

Answer 2

由于 toggleStatus 不是 DOM 元素 #change-color 的“真实”属性，因此每次在函数中设置属性：changeColor() 为“on”时，它都会被视为新实例 - 因此不继承上次调用的历史记录或属性。

您可以通过在此函数之外声明属性来解决此问题，如下所示：

const theToggle = document.getElementById("change-color");
theToggle.toggleStatus = "on";

function changeColor() {
  switch (theToggle.toggleStatus) {
    case "on":
      theToggle.toggleStatus = "off";
      theToggle.style.color = "purple";
      theToggle.style.backgroundColor = "yellow";
      break;
    case "off":
      theToggle.toggleStatus = "on";
      theToggle.style.color = "yellow";
      theToggle.style.backgroundColor = "purple";
      break;
  }
}

这样，您的自定义属性在浏览器中“保留”，并且可以在设置时由 DOM 更改和继承。

示例：

const theToggle = document.getElementById("change-color");
theToggle.toggleStatus = "on";

function changeColor() {
  switch (theToggle.toggleStatus) {
    case "on":
      theToggle.toggleStatus = "off";
      theToggle.style.color = "purple";
      theToggle.style.backgroundColor = "yellow";
      break;
    case "off":
      theToggle.toggleStatus = "on";
      theToggle.style.color = "yellow";
      theToggle.style.backgroundColor = "purple";
      break;
  }
}

#change-color {
  width: 100px;
  height: 100px;
  color: yellow;
  background-color: purple
}

<div class="column">
  <button id="change-color" data-status="on" onclick="changeColor()">Change Color</button>
</div>

Answer 3

不是开关盒问题。

首先，toggleStatus 不是属性。

其次，每次函数运行时theToggle.toggleStatus = "on"; 总是将属性设置为打开，所以这就是为什么 switch case 只为 'on' 运行

你可以这样做：

var  toggleStatus = "on";

function changeColor() {
  let theToggle = document.getElementById("change-color");
  switch (toggleStatus) {
    case "on":
      toggleStatus = "off";
      theToggle.style.color = "purple";
      theToggle.style.backgroundColor = "yellow";
      break;
    case "off":
      toggleStatus = "on";
      theToggle.style.color = "yellow";
      theToggle.style.backgroundColor = "purple";
      break;
  }
}

#change-color {
  width: 100px;
  height: 100px;
  color: yellow;
  background-color: purple
}

<div class="column">
  <button id="change-color" onclick="changeColor()">Change Color</button>
</div>

一个简单的方法是简单地切换一个类

示例：

function changeColor() {
  let theToggle = document.getElementById("change-color");
  theToggle.classList.toggle('active')
}

#change-color {
  width: 100px;
  height: 100px;
  color: yellow;
  background-color: purple
}

#change-color.active {
  color: purple;
  background-color: yellow;
}

<div class="column">
  <button id="change-color" onclick="changeColor()">Change Color</button>
</div>