temporäre CSS Änderungen durch Javascript

Question

Ich benutze einen benutzerdefinierten Kippschalter auf meiner Website, die ON oder OFF geschaltet werden kann. Abhängig davon, ob es ON oder OFF (aktiviert oder deaktiviert) ist, gibt es verschiedene CSS Klassen, die auf den Switch angewendet werden und den Style ändern.

Ich möchte diesen Kippschalter on/off mit Javascript aktivieren. Eine Änderung des Status "checked/unchecked" ändert jedoch nichts. Dies führt dazu, dass ich den CSS Stil des Schalters anpassen muss, um ihn z.B. AUS.

Dies führt jedoch zu dem Problem jetzt. Wenn ich die CSS mit Javascript ändere, füge ich dem Element grundsätzlich Stile direkt hinzu. Dies führt dazu, dass der normale Kippschalter CSS nicht mehr funktioniert, da der Elementstil jeden Klassenstil außer Kraft setzt. Wenn ich dem Switch eine zusätzliche Klasse zuweisen, überschreibt der normale Stil die Klasse. mit !important ist keine Option, da es OFF/ON

dauerhaft zu bleiben Gibt es eine Möglichkeit CSS auf ein Element anzuwenden, ohne die Standard CSS Stil ändert sich automatisch zu deaktivieren? wie einen CSS Stil einstellen, bis die nächste normale Änderung passiert?

HTML

<div class="onoffswitch active" id="recurringdiv"> 
    <p>Recurring</p> 
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked=""> 
    <label class="onoffswitch-label" for="myonoffswitch" data-click-state="0" id="recurringfield"> 
    <span class="onoffswitch-inner custom1"></span> 
    <span class="onoffswitch-switch custom2"></span> 
    </label> 
</div> 

JS

$(document).ready(function() { 
    $('.onoffswitch-label').on('click', function() { 
    if ($(this).attr('data-click-state') == 1) { 
     $(this).attr('data-click-state', 0) 
     /*Click State 1 finish*/ 
    } else { 
     $(this).attr('data-click-state', 1) 
     /*Click State 2 finish*/ 
    } 
    }); 
}); 

<!-- This is the autopay --> 
$(document).ready(function() { 
    $('.auto-onoffswitch-label').on('click', function() { 
    if ($(this).attr('data-click-state') == 1) { 
     $(this).attr('data-click-state', 0) 
     /*Click State 1 finish*/ 
    } else { 
     $(this).attr('data-click-state', 1) 
     /*Click State 2 finish*/ 
    } 
    }); 
}); 

CSS

.auto-onoffswitch-checkbox:checked + .auto-onoffswitch-label .auto-onoffswitch-switch { 
    right: 0px; 
} 
.auto-onoffswitch-switch { 
    display: block; 
    width: 18px; 
    margin: 6px; 
    background: #FFFFFF; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 56px; 
    border: 2px solid #a9a9a9; 
    border-radius: 20px; 
    transition: all 0.3s ease-in 0s; 
} 

Answer 1

Wenn Sie nicht den Status des Elements usin ändern g CSS/normal jquery Ich würde empfehlen, ein click-Event zu verwenden.

if (condition == true) { 
jQuery(".onoffswitch-switch").trigger('click'); 
} 

Seine einfache und sollte den Trick