更改class onclick並刪除類，當點擊一個按鈕

Question

我想，如果我點擊「btn」，「外部」和「btn」添加的類被刪除，並添加以前的類。我已經嘗試過使用removeClass，但它可以工作嗎？我該怎麼做？我對jQuery相當陌生。還要忽略代碼片段中的錯誤。我沒有在我的網站上找到他們。

$(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

嗯，不知何故切換沒有工作。但現在它確實如此。解決了。對於球員，誰都有同樣的問題：只要使用toggleClass代替addClass

（感謝Barmar，因爲他已經提到它）