如何在Javascript中添加/刪除CSS類div？

Question

我正在嘗試創建一個在CSS類之間更改的div，單擊它時，再次單擊它將使div返回。 我試圖在第二次單擊div時刪除該類，但是似乎我沒有采取正確的方法。 我該如何實現？

  $('.snu').click(function () { $(this).find('.kort').addClass('snudd'); }); $('.snudd').click(function () { $(this).find('.kort').removeClass('snudd'); }); 

  body { background: #ccc; } .snu { -webkit-perspective: 800; -moz-perspective: 800; width: 400px; height: 200px; position: relative; margin: 50px auto; } .snu .kort.snudd { -webkit-transform: rotatey(-180deg); -moz-transform: rotatey(-180deg); } .snu .kort { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; -moz-transform-style: preserve-3d; -moz-transition: 0.5s; } .snu .kort .side { width: 100%; height: 100%; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; z-index: 2; font-family: Georgia; font-size: 1em; text-align: center; line-height: 200px; } .snu .kort .forrand { position: absolute; z-index: 1; background: black; color: white; cursor: pointer; } .snu .kort .bak { -webkit-transform: rotatey(-180deg); -moz-transform: rotatey(-180deg); background: blue; background: white; color: black; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div class="snu"> <div class="kort"> <div class="side forrand">dette er forranddfsdfgsdfdsfgdsgfg</div> <div class="side bak">dett er bakgdfgdfgdfg</div> </div> </div> 

Answer 1

使用以下js

 $('.snu').click(function () {
    $(this).find('.kort').toggleClass('snudd');
    });

Answer 2

只需在第一個事件偵聽器中使用toggleClass() 。 您不能將事件偵聽器應用於代碼運行時不存在的類

 $('.snu').click(function() { $(this).find('.kort').toggleClass('snudd'); }); 

 body { background: #ccc; } .snu { -webkit-perspective: 800; -moz-perspective: 800; width: 400px; height: 200px; position: relative; margin: 50px auto; } .snu .kort.snudd { -webkit-transform: rotatey(-180deg); -moz-transform: rotatey(-180deg); } .snu .kort { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; -moz-transform-style: preserve-3d; -moz-transition: 0.5s; } .snu .kort .side { width: 100%; height: 100%; position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; z-index: 2; font-family: Georgia; font-size: 1em; text-align: center; line-height: 200px; } .snu .kort .forrand { position: absolute; z-index: 1; background: black; color: white; cursor: pointer; } .snu .kort .bak { -webkit-transform: rotatey(-180deg); -moz-transform: rotatey(-180deg); background: blue; background: white; color: black; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div class="snu"> <div class="kort"> <div class="side forrand">dette er forranddfsdfgsdfdsfgdsgfg</div> <div class="side bak">dett er bakgdfgdfgdfg</div> </div> </div> 

Answer 3

用純JavaScript

let snu = document.querySelector('.snu');
let kort = document.querySelector('.kort');

snu.onclick =  function() {
    kort.classList.toggle('snudd');
} 

Answer 4

使用toggleClass ：

$('.snu').click(function () {
    $(this).find('.kort').toggleClass('snudd');
});