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

ノート - これはテストされていない、実際の値は、（ "0.2" や "0.2"）を異なる場合があります - あなたは" このような

Answer 2

何かが動作するはずですテストする必要がある

。私はあなたの質問の権利を理解している場合

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

Answer 3

、あなたはいくつかの時間後にそれをオフにしたい

ですから、このようなsetTimeoutなものを使用する必要があります。

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

さらに詳しい情報：JS timing

Answer 4

より良いアプローチは、「の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'); 

Answer 5

あなたはjQueryを使って「オン」と別の「オフ」のために、その後toggleClassのラッパーのdivにCSSでクラスを与えることができます。

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