0

期間限定で div にクラスを追加してから削除するコードを作成しようとしています。
javascript の setTimeout と jQuery の delay を使用してみましたが、何も機能しません。
要素は設定されていますが、削除されることはありません。

これが私が思いついたものです： 

window.onload = function() {
    $(".button").click(handler);
}

function handler() {
    $(this).addClass("onclick");
    setTimeout(function() { $(this).removeClass("onclick"); }, 3000); // JS's setTimeout

    $(this).addClass("onclick").delay(3000).removeClass("onclick"); // jQuery's delay
}

何が悪いのかわかりません... setTimeout 関数の 2 つ目のハンドラーを作成してみました。

ありがとうございます。

4

2 に答える 2

5

あなたが抱えている問題はthis、あなたが渡している関数の中setTimeoutでそれがそれの外にあるのとは異なるということです。通常の修正は、クロージャーを保持する変数を作成し、代わりに変数を使用してクロージャーを使用することです。

function handler() {
    var $elm = $(this);

    $elm.addClass("onclick");
    setTimeout(function() {
        $elm.removeClass("onclick");
    }, 3000);
}

そこで、varを使用して結果をキャッシュしまし$(this)た。これは、2回以上実行しても意味がないためです。

その他の背景：

JavaScriptでは、似ているように見える一部の言語とは異なり、関数の呼び出し方法thisによって完全に定義されます。を使用すると、関数が呼び出される方法がグローバルオブジェクト（ブラウザでは、）になるため、機能しませんでした。setTimeoutthiswindow$(this).removeClass(...)

this興味がある場合の詳細：

于 2012-06-15T08:58:53.633 に答える
2

thissetTimeout 呼び出し内では、クリックされた要素は参照されません。

これを次のように変更します。

function handler() {
    var t = $(this);
    t.addClass("onclick");
    setTimeout(function() { t.removeClass("onclick"); }, 3000);
}

実例 - http://jsfiddle.net/5vakN/

thisjavascript での動作に関するリファレンス- http://bonsaiden.github.com/JavaScript-Garden/#function.this

于 2012-06-15T08:59:01.567 に答える