使用按鈕刪除和添加類

Question

我試圖使用一個按鈕刪除類.computer-off並添加.computer-on ，反之亦然。 我已經嘗試了很多方法，但是沒有用。 這是一種方法：

HTML ：

<div id="computer-screen" class="computer-off">

    <button onclick="computerPower()" class="power-button">Power</button>

</div>

JS ：

function computerPower() {
    if ( $("#computer-screen").hasClass('computer-off') ) {
        document.getElementById('computer-screen').removeClass('computer-off').addClass('computer-on');
    } else {
        document.getElementById("computer-screen").removeClass('computer-on').addClass('computer-off');
    }
};

Answer 1

考慮到您似乎 （正在嘗試）使用jQuery，我建議您：

$('#power').on('click', function() {
  $('#computer-screen').toggleClass('computer-off computer-on');
});

 $('#power').on('click', function() { $('#computer-screen').toggleClass('computer-off computer-on'); }); 

 #computer { width: 60%; margin: 1em auto; padding: 1em; border: 1px solid darkgrey; overflow: hidden; border-radius: 0.4em 0.4em 0 0; } #computer-screen { border-radius: 0.5em; height: 15em; } .computer-off { background-color: #000; } .computer-on { background-color: #060; box-shadow: 0 0 1.0em #060; } #power { cursor: pointer; position: relative; float: right; width: 2em; height: 2em; line-height: 2em; border-radius: 50%; border: 1px solid #aaa; margin-top: 0.3em; } .computer-on + #power { box-shadow: inset 0 1px 3px #666; } #power::before { content: ''; position: absolute; top: 0.3em; bottom: 0.75em; left: 0.9em; right: 0.9em; background-color: #ccc; } #power::after { content: ''; height: 1em; width: 1em; position: absolute; border: 0.2em solid #ccc; border-top-color: transparent; border-radius: 50%; bottom: 0.3em; left: 0.3em; } #computer-screen.computer-on + #power::before { background-color: #0f0; } #computer-screen.computer-on + #power::after { border-color: #0f0; border-top-color: transparent; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="computer"> <div id="computer-screen" class="computer-off"></div> <div id="power"></div> </div> 

或者，使用純JavaScript：

document.getElementById('power').addEventListener('click', function() {
  var screen = document.getElementById('computer-screen');
  screen.classList.toggle('computer-off');
  screen.classList.toggle('computer-on');
});

 document.getElementById('power').addEventListener('click', function() { var screen = document.getElementById('computer-screen'); screen.classList.toggle('computer-off'); screen.classList.toggle('computer-on'); }); 

 #computer { width: 60%; margin: 1em auto; padding: 1em; border: 1px solid darkgrey; overflow: hidden; border-radius: 0.4em 0.4em 0 0; } #computer-screen { border-radius: 0.5em; height: 15em; } .computer-off { background-color: #000; } .computer-on { background-color: #060; box-shadow: 0 0 1.0em #060; } #power { cursor: pointer; position: relative; float: right; width: 2em; height: 2em; line-height: 2em; border-radius: 50%; border: 1px solid #aaa; margin-top: 0.3em; } .computer-on + #power { box-shadow: inset 0 1px 3px #666; } #power::before { content: ''; position: absolute; top: 0.3em; bottom: 0.75em; left: 0.9em; right: 0.9em; background-color: #ccc; } #power::after { content: ''; height: 1em; width: 1em; position: absolute; border: 0.2em solid #ccc; border-top-color: transparent; border-radius: 50%; bottom: 0.3em; left: 0.3em; } #computer-screen.computer-on + #power::before { background-color: #0f0; } #computer-screen.computer-on + #power::after { border-color: #0f0; border-top-color: transparent; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="computer"> <div id="computer-screen" class="computer-off"></div> <div id="power"></div> </div> 

參考文獻：

• JavaScript的：
  • document.querySelector() 。
  • Element.classList 。
• jQuery的：
  • toggleClass() 。