各要素の一意のsetTimeoutタイマー？

Question

私は、要素がプレーンテキストで表示されているメニューを作成しようとしています。マウスオーバーすると、プレーンテキストを編集するためのフィールドが表示されます。

あなたがここでの例を見ることができます

：http://jsfiddle.net/Bx7vX/9/

タイマ変数がグローバルに宣言されているので、あなたが本当にすぐに2番目のリスト要素にカーソルを合わせると、それは前の要素のためのタイマをクリア。しかし、関数内のタイマー（ここでは：http://jsfiddle.net/JYavJ/）を宣言すると、複数の要素が正しくフェードアウトされますが、要素の上にマウスを移動してから再びオンにすると、タイマーが正しくクリアされません。

基本的に、私はタイマー変数を1つの要素のホバー間で永続的に保つことに問題があります。私は成功していないDOM要素にタイマー変数を追加しようとしました。誰かがこの問題を解決する方法を知っている場合、あるいはこのメニュースタイルに完全に近づけるより良い方法を知っていれば、私はそれを高く評価します。ありがとう！参考のため、ここでのホバー機能の外で宣言タイマー付きコード

です：

ここ

$('.diet_draggable').hover(function() { 
var timer; 
var current = $(this); 

if (current.is(':hover')){ 
    clearTimeout(timer); 
    $(this).children(".static_units").hide(); 
    $(this).children(".mod_units").show(); 
} 

else if (current.children('.mod_units').children('.list_amount').is(":focus")) { 
    current.children('.mod_units').children('.list_amount').blur(function() { 
     timer = setTimeout(function() { 
      current.children(".mod_units").fadeOut(300); 
      current.children(".static_units").fadeIn(300); 
     }, 500); 
     if (current.is(':hover')) clearTimeout(timer); 
    }); 
} 
else { 
    timer = setTimeout(function() { 
     current.children(".mod_units").fadeOut(300); 
     current.children(".static_units").fadeIn(300); 
    }, 500); 
} 
}); 

Answer 1

あなたは、このバージョンですはるかに簡単ですが、あなたが望むとおりに動作します：

var dietDraggable = function(element) { 
var timer = null; 

element.hover(function() { 
    clearTimeout(timer); 
    $(this).children(".static_units").hide(); 
    $(this).children(".mod_units").show(); 
}, function() { 
    timer = setTimeout(function() { 
     element.children(".mod_units").fadeOut(300); 
     element.children(".static_units").fadeIn(300); 
    }, 500); 
}); 

};

$（ '。diet_draggable'）。それぞれ（function（）{ dietDraggable（$（this））; }）;

キーは、私がjQueryのホバー機能の両方のパラメーターを使用していることです。 2番目のパラメータは、問題の要素から離れたところで起こることです。もう一つの重要な点は、関数dietDraggableの内部にタイマーを宣言していることです。これにより、要素ごとにクロージャが作成されるため、それぞれに独自のタイマーが設定されます。

アクションでそれを見るために：http://jsfiddle.net/VjHcr/2/