3

我的网站上有一个电灯开关图像。它触发了一个函数（使用 onClick），它使整个包装 div 的不透明度为 0.2，从而产生灯光关闭的效果。

所以点击了开关并且灯“关闭”了，但是我不知道如何重新打开它们。

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

您可以在 CSS 中为包装器 div 提供一个“on”类和另一个“off”类，然后使用 JQuery 切换类。

$(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 回答
2

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

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

注意，classList没有在 Internet Explorer 中实现，因此您需要为此参考Eli Grey 的 polyfill。为了使用这个函数，你需要传递一个元素和一个类名。因此，要再次使用具有 id 的元素switchOff，我们可以执行以下操作：

toggleClass( document.getElementById("switchOff"), 'lightsOut' );
于 2012-04-25T15:33:36.570 回答
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 回答