添加后删除类

Question

我想删除在用户单击 div 后立即添加的类。

我的意思是，单击 div 后，我希望删除该类。

https://codepen.io/jinzagon/pen/XWdVbgo

  <script>

    $(document).ready(function() {

    $('.section').click(function(e) {

      e.preventDefault();

      var $responsiveDiv = $('.response')

       $responsiveDiv.addClass('clicked');

       setTimeout(function() {

        window.location.assign($a.attr('href'));

     }, 6700); 

    

    }); 

  });

  </script>

Answer 1

jQuery 有一个toggleClass你可以使用的函数。关联这是您的示例 - 当您单击该部分时，背景颜色将切换（以便于观察）。.clicked {&nbsp; background-color: red}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="section">&nbsp; &nbsp; <div class="response">&nbsp; &nbsp; &nbsp; &nbsp; This is a response&nbsp; &nbsp; </div></div><script>&nbsp; $(document).ready(function() {&nbsp; &nbsp; $('.section').click(function(e) {&nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; var $responsiveDiv = $('.response');&nbsp; &nbsp; &nbsp; $responsiveDiv.toggleClass('clicked');&nbsp; &nbsp; });&nbsp;&nbsp; });</script>

Answer 2

您需要使用 setTimeout 推迟删除&nbsp; <script>&nbsp; &nbsp; $(document).ready(function() {&nbsp; &nbsp; $('.section').click(function(e) {&nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; var $responsiveDiv = $('.response')&nbsp; &nbsp; &nbsp; $responsiveDiv.addClass('clicked');&nbsp; &nbsp; &nbsp; setTimeout(function() {&nbsp; &nbsp; &nbsp; &nbsp; $responsiveDiv.removeClass('clicked');&nbsp; &nbsp; &nbsp; }, 1000);&nbsp;&nbsp; &nbsp; &nbsp; setTimeout(function() {&nbsp; &nbsp; &nbsp; &nbsp; window.location.assign($a.attr('href'));&nbsp; &nbsp; &nbsp; }, 6700);&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; });&nbsp;&nbsp; });&nbsp; </script>

Answer 3

使用javascript，您可以使用.classList.remove("foo");阅读有关Element.classList的更多信息function addClassThenRemove(){&nbsp; // grab h1 element&nbsp; let h1Element = document.querySelector('h1')&nbsp; // add class to the element&nbsp; h1Element.classList.add('new')&nbsp; setTimeout(function(){&nbsp; &nbsp; //after 2 seconds remove class new&nbsp; &nbsp; h1Element.classList.remove('new')&nbsp; }, 2000)}.new{&nbsp; color: blue;}<h1>Hello World</h1><button onClick="addClassThenRemove()">Click Me!</button>

Answer 4

toggleClass()您可以为此使用该功能<script>&nbsp; &nbsp; $(document).ready(function() {&nbsp; &nbsp; $('.section').click(function(e) {&nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; var $responsiveDiv = $('.response')&nbsp; &nbsp; &nbsp; &nbsp;$responsiveDiv.toggleClass('clicked'); //Toggle class instead of Add&nbsp; &nbsp; &nbsp; &nbsp;setTimeout(function() {&nbsp; &nbsp; &nbsp; &nbsp; window.location.assign($a.attr('href'));&nbsp; &nbsp; &nbsp;}, 6700);&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; });&nbsp;&nbsp; });&nbsp; </script>