添加后删除类

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 {

  background-color: red

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="section">

    <div class="response">

        This is a response

    </div>

</div>

<script>

  $(document).ready(function() {

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

      e.preventDefault();

      var $responsiveDiv = $('.response');

      $responsiveDiv.toggleClass('clicked');

    }); 

  });

</script>

Answer 2

您需要使用 setTimeout 推迟删除

  <script>

    $(document).ready(function() {

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

      e.preventDefault();

      var $responsiveDiv = $('.response')

      $responsiveDiv.addClass('clicked');

      setTimeout(function() {

        $responsiveDiv.removeClass('clicked');

      }, 1000); 

      setTimeout(function() {

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

      }, 6700); 

    

    }); 

  });

  </script>

Answer 3

使用javascript，您可以使用.classList.remove("foo");

阅读有关Element.classList的更多信息

function addClassThenRemove(){

  // grab h1 element

  let h1Element = document.querySelector('h1')

  // add class to the element

  h1Element.classList.add('new')

  setTimeout(function(){

    //after 2 seconds remove class new

    h1Element.classList.remove('new')

  }, 2000)

}

.new{

  color: blue;

}

<h1>Hello World</h1>

<button onClick="addClassThenRemove()">Click Me!</button>

Answer 4

toggleClass()您可以为此使用该功能

<script>

    $(document).ready(function() {

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

      e.preventDefault();

      var $responsiveDiv = $('.response')

       $responsiveDiv.toggleClass('clicked'); //Toggle class instead of Add

       setTimeout(function() {

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

     }, 6700); 

    

    }); 

  });

  </script>