Fonction setTimeout avec le document au clic

J'ai un problème avec mon code. Je veux faire quand je clique sur div qui obtient une classe et après 1 seconde, il supprime cette classe. Voici exemple de mon code:Fonction setTimeout avec le document au clic

$(document).ready(function() { 
    alert('aaa'); 
    $(document).on("click", ".items-layout > div", function() { 
    var $this = $(this); 
    $this.addClass('hover-effect'); 
    $this.off("click"); 
    }, function() { 
    setTimeout(function() { 
     var $self = $(this); 
     $self.removeClass('hover-effect'); 
     alert('yolo'); 
    }, 1000); 
});

Source

2017-10-20 Anonymous

$(document).ready(function() { 
alert('aaa'); 
$(document).on("click", ".items-layout > div", function() { 
     var $this = $(this); 
     $this.addClass('hover-effect').off("click"); 
     setTimeout(function() { 
      $this.removeClass('hover-effect'); 
      alert('yolo'); 
     }, 1000); 
});

ce qui était faux:

vous passé dans .on('click' deux fonctions. Mais vous ne pouvez en passer qu'un seul (second juste ignoré). Vous devez donc déplacer le code du second dans le premier. C'est ce que je faisais

Source

2017-10-20 08:13:10

C'était rapide ... –

Tout explanantion du problème et pourquoi ce problème est résolu? –

@RoryMcCrossan sûr –

Essayez cette ...

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title></title> 
     <style> 
      .hover-effect{ 
       background-color: #00733e; 
      } 
      .normal-effect{ 
       color: #000000; 
       background-color: #ffffff; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="items-layout"> 
      <div>sample</div> 
     </div> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       alert('aaa'); 
       $(document).on("click", ".items-layout > div", function() { 
        var $this = $(this); 
        console.log($this); 
        $this.addClass('hover-effect'); 
        $this.off("click"); 
        setTimeout(function() { 
         var $self = $(this); 
         $self.removeClass('hover-effect'); 
         $this.addClass('normal-effect'); 
         alert('yolo'); 
        }, 1000); 
       }); 
      }); 
     </script> 
    </body> 
</html>

Merci ...

Source

2017-10-20 08:56:03

dans votre cas 'var $ self = $ (this);' sauvera le contexte incorrect cause 'this' est soit une fenêtre/undefined –

Fonction setTimeout avec le document au clic

Répondre

Questions connexes