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 timing

Answer 3

更好的方法是创建一个名为'lightsOut'的CSS类，并将其添加/移除到switchoff元素。

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

注意，classList未在Internet Explorer中实现，因此您需要为此引用Eli Grey's polyfill。为了使用此函数，您可以传递一个元素和一个类名。因此，要再次使用标识为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'      
  }
}

JavaScript - 打开开关然后关闭

5 个答案: