在樣式之間切換回來onClick（） - 切換案例

Question

在本頁：

http://javascript.drawyourpets.com/

每次用戶點擊按鈕時，我都會嘗試在樣式之間來回切換。

我根據此解決方案的代碼使用了一個開關盒：

 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> 

這會第一次改變背景顏色，但它只能工作一次 - 它應該在每次點擊時改變。

我對切換機箱不是很熟悉，可能有些問題嗎？

Answer 1

這不是交換機案例問題。

首先，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> 

Answer 2

你的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 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>