在样式onClick（）之间来回切换-切换大小写

Question

在此页面上：

http://javascript.drawyourpets.com/

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

根据this solution中的代码，我使用的是开关盒：

# Works too - "/" is also recognized as a literal.
PS> [datetime]::ParseExact('6/2019','M/yyyy', [cultureinfo] 'de-DE')

Saturday, June 1, 2019 12:00:00 AM

⬇

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;
  }
}

这是第一次更改背景颜色，但只能使用一次-每次单击都应更改。

我对开关盒不是很熟悉，也许是有问题吗？

Answer 1

您的html元素中没有toggleStatus。一种方法是jQuery的toggleClass();，或者如果您想在纯js中使用它，则可以添加名为data的{​​{1}}属性来控制开关的大小写。

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

status

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
}

Answer 2

这不是开关盒的问题。

首先，toggleStatus不是属性。

其次，每次函数运行theToggle.toggleStatus = "on";时，始终将属性设置为on，这就是为什么只为'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>

Answer 3

由于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>