JavaScript - 打开开关，然后关闭

我的网站上有一个灯开关图像。它触发一个函数（使用onClick），这使得整个包装div的不透明度为0.2，从而使灯关闭。JavaScript - 打开开关，然后关闭

因此，开关被点击，灯光“关闭”，但我无法弄清楚如何重新打开它们。

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

我对JavaScript非常陌生，所以我相信解决方案很简单。

来源

2012-04-25 Sean Zulu

您是否尝试过重新设置不透明度回1？ – Krishna 2012-04-25 15:28:01

“......但是我无法解决如何让他们回来....”如果你的意思是关闭一段时间后，请检查我的答案。 – SlavaNov 2012-04-25 15:38:22

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“） - 你需要测试”

来源

2012-04-25 15:27:59 xandercoded

您创建的不透明度变量是一个不是对象的值 - 这不起作用。它只会改变你的变量的值。你应该创建一个ref的样式。 – 2012-04-25 15:28:59

像这样的东西应该工作

。

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-25 15:29:33

如果我明白你的问题吧，你要一段时间后，可将其关闭

所以，你应该用setTimeout是这样的：

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

更多信息：JS timing

来源

2012-04-25 15:31:33 SlavaNov

的更好的方法是创建一个名为“的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');

来源

2012-04-25 15:33:36 Sampson

你可以给包装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-25 15:39:03 broguyman

JavaScript - 打开开关，然后关闭

回答

相关问题