如何在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');
});