4

子供のマウスオーバー イベントに単純な遅延を追加しようとしていますが、問題があります。（まだまだ勉強中！）

これにより、遅延後にポップアップを表示できますが、それらすべてが同時に表示されます。

onmouseover='setTimeout(function() { $(\".skinnyPopup\").show(); }, 600)'

これは、必要なポップアップのみを遅滞なく表示するように機能します。

onmouseover='$(this).children(\".skinnyPopup\").show()'

しかし、組み合わせはそうではありません:

onmouseover='setTimeout(function() { $(this).children(\".skinnyPopup\").show(); }, 600)'

どんな助けでも大歓迎です。ありがとう！

4

2 に答える 2

4

this実行時に何があるかを定義する必要があります。次のようなものが機能します。

setTimeout($.proxy(function() { $(this).children(".skinnyPopup").show(); }, this), 600)

または.delay()、次のように使用します。

$(this).children(".skinnyPopup").delay(600).show(0);

上記は両方とも簡単な修正です。インライン ハンドラーから離れて、目立たない方法を確認することをお勧めします (大きな理由については、 Russ Camによるこの回答を参照してください)。たとえば、次のようになります。

$(function() {
  $('selector').mouseover(function() {
    $(this).children(".skinnyPopup").delay(600).show(0);
  });
});
于 2010-09-07T18:48:38.733 に答える
0

これthisは、要素ではなく、グローバル コンテキストにバインドされているためです。代わりに次のようなものを使用してください。

// put this in your document head -- replace element with a selector for the elements you want
$(function () {
    $(element).bind("mouseover", function () {
       var e = $(this);
       setTimeout(function () { e.children(".skinnyPopup").show(); }, 600);
    });
});

インライン イベント ハンドラーに固執している場合は、次の方法も機能するはずです。

onmouseover='var self = this; setTimeout(function() { $(self).children(\".skinnyPopup\").show(); }, 600)'
于 2010-09-07T18:45:54.140 に答える