Timer für bestimmte Elemente einstellen

Question

Ich habe ein Raster mit 25 anklickbaren Elementen. Wenn jemand auf einen gewünschten Gegenstand klickt, sollte ein Timer für diesen Gegenstand beginnen. Nachdem der Timer 0 erreicht hat, sollte der Gegenstand versteckt werden. Was ist der beste Weg, dies zu tun?

Dies ist das Gitter:

<ul class="field"> 
     <?php 
      for($i = 1; $i<26; $i++){ 
     ?> 
      <li id="item-<?php echo $i; ?>" data-specie="test-<?php echo $i; ?>" data-level="0" class="field-item"> 
       <img>  
      <!--</li>--> 
     <?php 
      } 
     ?> 
    </ul> 

Und dies ist der jquery Teil:

$(".field-item").click(function() 
{ 
    var level = $(this).data('level'); 
    level ++; 
    $(this).data('level',level); 
    $(this).find("img").attr("src","../css/images/plant-1-"+level+".png"); 

    setTimeout(progress, 3000); 
}); 

Und dies ist die Funktion, die nur das Raster-Element verstecken sollte, die auf geklickt wurde. (Ich weiß, das nicht durch die Art und Weise funktioniert, ich weiß nur nicht, wie dieses Teil zu tun.)

function progress(){ 
    $(this).hide(); 
} 

Answer 1

nur sollte das Raster-Element auszublenden, die auf

geklickt wurde

Sie könnten die aktuelle Instanz geklickt Element passieren bind(), wie in @Andreas comment erwähnt, so wird es sein:

setTimeout(progress.bind(this), 3000); 

Statt:

setTimeout(progress, 3000); 

Hoffnung, das hilft.