JavaScript - 打開開關，然後關閉

我的網站上有一個燈開關圖像。它觸發一個函數（使用onClick），這使得整個包裝div的不透明度爲0.2，從而使燈關閉。JavaScript - 打開開關，然後關閉

因此，開關被點擊，燈光「關閉」，但我無法弄清楚如何重新打開它們。

function lightSwitch() 
{ 
    document.getElementById("switchoff").style.opacity = '0.2'; 
}

我對JavaScript非常陌生，所以我相信解決方案很簡單。

來源

2012-04-25 Sean Zulu

您是否嘗試過重新設置不透明度回1？ – Krishna 2012-04-25 15:28:01

「......但是我無法解決如何讓他們回來....」如果你的意思是關閉一段時間後，請檢查我的答案。 – SlavaNov 2012-04-25 15:38:22

function lightSwitch() 
{ 
    var el = document.getElementById("switchoff"), 
     opacity = el.style.opacity; 

    if(opacity == '0.2') 
     el.style.opacity = '1'; 
    else 
     el.style.opacity = '0.2'; 
}

注 - 這不是測試，實際值可能會有所不同（「0.2" 或」0.2「） - 你需要測試」

來源

2012-04-25 15:27:59 xandercoded

您創建的不透明度變量是一個不是對象的值 - 這不起作用。它只會改變你的變量的值。你應該創建一個ref的樣式。 – 2012-04-25 15:28:59

像這樣的東西應該工作

。

function lightSwitch() {  

    var lightSwitch = document.getElementById("switchoff"); 

    if(lightSwitch.style.opacity != "0.2") //If the div is not 'off' 
    { 
    lightSwitch.style.opacity = '0.2'; //switch it 'off' 
    } 
    else 
    { 
    lightSwitch.style.opacity = '1.0'; // else switch it back 'on'  
    } 
}

來源

2012-04-25 15:29:33

如果我明白你的問題吧，你要一段時間後，可將其關閉

所以，你應該用setTimeout是這樣的：

function lightSwitch() 
{ 
    document.getElementById("switchoff").style.opacity = '0.2'; 
    setTimeout(...function to turn it off...,5000); // 5000 mseconds 
}

更多信息：JS timing

來源

2012-04-25 15:31:33 SlavaNov

的更好的方法是創建一個名爲「的LightsOut」 CSS類，並添加/刪除了此信息switchoff元素。

function toggleClass(element, className) { 
    element.classList.toggle(className); 
}

注意，classList沒有在Internet Explorer中實現的，所以你就需要引用Eli Grey's polyfill這一點。爲了使用這個函數，你傳遞一個元素和一個類名。因此，與ID switchOff再次使用的元素，我們可以做到以下幾點：

toggleClass(document.getElementById("switchOff"), 'lightsOut');

來源

2012-04-25 15:33:36 Sampson

你可以給包裝DIV在CSS類爲「開」，另一個是「關閉」，然後使用jQuery toggleClass。

$(document).ready(function() { 

     $(".switchClass").click(function() { 
      $(this).toggleClass("off"); 
      return false; 
     }); 
    });

CSS：

div.switchClass{ 
//Insert your own look and feel 
} 

div.off.switchClass{ 
//Same style as div.switchClass except change the opacity 
opacity: 0.2; 
}

來源

2012-04-25 15:39:03 broguyman

JavaScript - 打開開關，然後關閉

回答

相關問題