JavaScript - 打开开关,然后关闭
我的网站上有一个灯开关图像。它触发一个函数(使用onClick),这使得整个包装div的不透明度为0.2,从而使灯关闭。JavaScript - 打开开关,然后关闭
因此,开关被点击,灯光“关闭”,但我无法弄清楚如何重新打开它们。
function lightSwitch()
{
document.getElementById("switchoff").style.opacity = '0.2';
}
我对JavaScript非常陌生,所以我相信解决方案很简单。
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“) - 你需要测试”
您创建的不透明度变量是一个不是对象的值 - 这不起作用。它只会改变你的变量的值。你应该创建一个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'
}
}
如果我明白你的问题吧,你要一段时间后,可将其关闭
所以,你应该用setTimeout
是这样的:
function lightSwitch()
{
document.getElementById("switchoff").style.opacity = '0.2';
setTimeout(...function to turn it off...,5000); // 5000 mseconds
}
更多信息:JS timing
的更好的方法是创建一个名为“的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');
你可以给包装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;
}
您是否尝试过重新设置不透明度回1? – Krishna 2012-04-25 15:28:01
“......但是我无法解决如何让他们回来....”如果你的意思是关闭一段时间后,请检查我的答案。 – SlavaNov 2012-04-25 15:38:22