JavaScript - 打開開關然后關閉

Question

我的網站上有一個電燈開關圖像。 它觸發一個函數（使用onClick），這使得整個包裝器div的不透明度為0.2，從而產生燈光關閉的效果。

因此，單擊開關並且指示燈“關閉”，但我無法確定如何重新打開它們。

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

我是JavaScript的新手，所以我相信解決方案很簡單。

Answer 1

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

注意 - 這沒有測試，實際值可能不同（“。2”或“0.2”） - 你需要測試“

Answer 2

如果我理解你的問題，你想在一段時間之后將其關閉。

所以你應該使用這樣的setTimeout ：

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

更多信息： JS計時

Answer 3

更好的方法是創建一個名為'lightsOut'的CSS類，並將其添加/刪除到您的switchoff元素。

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

請注意， classList未在Internet Explorer中實現，因此您需要為此引用Eli Gray的polyfill 。 為了使用此函數，您可以傳遞一個元素和一個類名。 因此，要再次使用具有id switchOff的元素，我們可以執行以下操作：

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

Answer 4

您可以在CSS中為包裝器div提供一個“on”，另一個用於“off”，然后使用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;
}

Answer 5

這樣的事情應該有效。

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