JavaScript - включение выключателя, затем выключено

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

Что-то, как это должно работать

.

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'  
    } 
} 

Answer 3

Если я понял ваш вопрос правильно, вы хотите, чтобы отключить его через некоторое время

Таким образом, вы должны использовать setTimeout что-то вроде этого:.

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

Подробнее: JS timing

Answer 4

подход лучше бы создать класс CSS под названием «LightsOut», и добавить/удалить это ваш switchoff элемент.

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

Примечание, classList не реализована в Internet Explorer, так что вам нужно будет ссылаться Eli Grey's polyfill для этого. Чтобы использовать эту функцию, вы передаете ей элемент и имя класса. Таким образом, чтобы использовать его снова элемент с идентификатором switchOff, мы могли бы сделать следующее:

toggleClass(document.getElementById("switchOff"), 'lightsOut'); 

Answer 5

Вы могли бы дать обертку Div класс в CSS для «на», а другой для «выключено», затем toggleClass с 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; 
}