3

ウェブサイトに照明スイッチの画像があります。これは、ラッパーdiv全体の不透明度を0.2にする関数（onClickを使用）をトリガーし、ライトがオフになっている効果を与えます。

そのため、スイッチがクリックされ、ライトが「オフ」になっていますが、オンに戻す方法がわかりません。

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

私はJavaScriptを初めて使用するので、解決策は簡単だと確信しています。

4

5 に答える 5

5 
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"）-テストする必要があります "

于 2012-04-25T15:27:59.500 に答える
2

私があなたの質問を正しく理解したなら、あなたはしばらくしてそれを止めたいと思うでしょう。

したがって、次setTimeoutのようなものを使用する必要があります。

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

詳細：JSタイミング

于 2012-04-25T15:31:33.230 に答える
2

より良いアプローチは、「lightsOut」と呼ばれるCSSクラスを作成し、これをswitchoff要素に追加/削除することです。

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

注、 Internet Explorerには実装されていないため、これについてはEliGreyのポリフィルclassListを参照する必要があります。この関数を使用するには、要素とクラス名を渡します。したがって、IDを持つ要素を再度使用するには、次のようにします。switchOff

toggleClass( document.getElementById("switchOff"), 'lightsOut' );
于 2012-04-25T15:33:36.570 に答える
2

ラッパー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-25T15:39:03.743 に答える
1

このようなものが機能するはずです。

 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-25T15:29:33.590 に答える