特定の要素のタイマーを設定する

Question

私は25個のクリック可能なアイテムでグリッドを持っています。ユーザーが希望するアイテムをクリックすると、このアイテムのタイマーが開始されます。タイマーが0になったら、アイテムは非表示になります。これを行う最善の方法は何ですか？

これはグリッドです：

<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> 

そして、これはjqueryの一部です：

$(".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); 
}); 

そして、これが唯一のクリックされたグリッド項目を非表示にする機能です。 （私はこれは方法によっては動作しません知っている、私はちょうどこの部分を行う方法を知りません。）

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

Answer 1

のみ

にクリックされたグリッド項目を非表示にします

@Andreas commentで述べたようにあなたがbind()を使用してクリックした要素の現在のインスタンスを渡すことができ、それは次のようになります。

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

の代わりに：

setTimeout(progress, 3000); 

は、この情報がお役に立てば幸いです。