Ändere die Klasse von div onclick und entferne die Klasse, wenn ich auf einen Knopf klicke

Question

Ich möchte, dass wenn ich auf "btn" klicke, die hinzugefügten Klassen auf "outer" und "btn" entfernt werden und die vorherigen Klassen hinzugefügt werden. Ich habe es bereits mit removeClass versucht, aber es funktioniert nicht? Wie kann ich es tun? Ich bin ziemlich neu bei jQuery. Ignorieren Sie auch die Fehler im Code-Snippet. Ich bekomme sie nicht auf meiner Website.

$(document).ready(function(){ 
 
    $("#outer").click(function() { 
 
     $("#outer").addClass("block01_big"); 
 
     $("#btn").addClass("button_visible"); 
 
    }); 
 
     
 
    <!-- edited -->  
 
    $("#btn").click(function() { 
 
    $("#outer").removeClass("block01_big"); 
 
    $("#btn").removeClass("button_visible"); 
 
    <!-- i also tried --> 
 
    $("#outer").addClass("block01"); 
 
    $("#btn").addClass("button_invisible"); 
 
    }); 
 
});

.container { 
 
    min-height: 100vh; 
 
    width: 99vw; 
 
    background-color: red; 
 
    
 
    overflow: hidden; 
 
    } 
 

 
.block01 { <!-- Normal Class for outer --> 
 
    float: left; 
 
    height: 500px; 
 
    width: 33.33333%; 
 
    background-color: green; 
 
    position: relative; 
 
    
 
    transition: all 0.8s ease-in-out; 
 
    -webkit-transition: all 0.8s ease-in-out; 
 
    -o-transition: all 0.8s ease-in-out; 
 
    -moz-transition: all 0.8s ease-in-out; 
 
    } 
 

 
.block01_big { <!-- outer gets bigger, by jQuery --> 
 
    position: absolute; 
 
    z-index: 999; 
 
    width: 100%; 
 
    height: 100%; 
 
    } 
 

 
.button_invisible { <!-- Not visible to the user --> 
 
    height: 0px; 
 
    width: 0px; 
 
    border: none; 
 
    
 
    transition: all 1s ease-in-out; 
 
    -webkit-transition: all 1s ease-in-out; 
 
    -o-transition: all 1s ease-in-out; 
 
    -moz-transition: all 1s ease-in-out; 
 
    
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    } 
 

 
.button_visible { <!-- Button gets visible, by jQuery --> 
 
    margin-right: 75px; 
 
    margin-bottom: 75px; 
 
    
 
    height: 75px; 
 
    width: 200px; 
 
    border: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="block01" id="outer"> <!-- jQuery: onClick, change outer class to .block01_big & bt" to button_visible --> 
 
    <button class="button_invisible" id="btn">Back</button> <!-- jQuery: onClick, change outer class to .block01 & btn to button_invisible (doesnt work)--> 
 
    </div> 
 
</div> 
 

 

 
<!-- If I click first on the outer, the classes from outer and btn should change. Now my Problem: How can I do it, if I click the button, that the added classes from outer and btn gets removed? -->

Answer 1

Hmm, wechseln irgendwie nicht funktioniert hat. Aber jetzt tut es. Gelöst. Für Jungs, die haben das gleiche Problem: nur toggleClass anstelle von addClass

(Dank Barmar, wie er bereits erwähnt)