3

私は JavaScript と jQuery に非常に慣れていないので、少しコードに問題があります。

HTML:

<div class="toggle" style="display: block; width: 200px; height: 200px; background-color: red;">test</div>

JavaScript:

jQuery(document).ready(
    function()
    {
        jQuery(".toggle").on("click", function() {
            console.log("let the toggling begin!");

            jQuery(this).slideToggle(600, function(){ // slide up
                setTimeout(function(){ // wait 4 sec, then slide back down
                    jQuery(this).slideToggle(600)
                }, 4000);
            });
        });
    }
);

つまり、div をクリックすると、上にスライドし、4 秒後に下にスライドします。うまくいきません。

JSFIDDLE: http://jsfiddle.net/zEqN9/2/

ただし、this各クロージャーの内部を に変更すると".toggle"、機能します。

JSFIDDLE: http://jsfiddle.net/YZxMb/

明らかに問題は私の使用ですthis

this2 つのクロージャー関数のそれぞれにパラメーターとして渡そうとしましたが、エラーが発生しましたUnexpected token this

this内部関数から変数にアクセスするにはどうすればよいですか?

4

6 に答える 6

1

コンテキスト外で呼び出すことが予想される関数bindの を指定するthisために使用します。

var foo = {
    bar: function () {
        setTimeout(function () { // though in a setTimeout
            console.log(this);
        }.bind(this), 0); // binding to `this` here means
    }
};

foo.bar(); // invoking it still has `this` of `foo`
于 2013-09-04T13:19:23.377 に答える
0

その理由は、jQuery イベントの場合、thisターゲット要素を参照するように関数のコンテキストが明示的に設定されているためです。これは jQuery によって行われます。ただし、無名関数 for にsetTimeoutはそのコンテキストが設定されていません。デフォルトのグローバル コンテキストを取得するためthis、ウィンドウを参照します。

あなたがする必要があるのは、クリックイベントのコンテキストへの参照を取得し、タイムアウトで参照を使用することです:

jQuery(function () {
    jQuery(".toggle").on("click", function () {
        var $this = $(this);

        $this.slideToggle(600, function () { // slide up
            setTimeout(function () { // wait 4 sec, then slide back down
                $this.slideToggle(600);
            }, 4000);
        });
    });
});

ただし、コメントで指摘されているように、これは次のように記述できます。

jQuery(function () {
    jQuery(".toggle").click(function () {
        jQuery(this).slideToggle(600).delay(4000).slideToggle(600);
    });
});
于 2013-09-04T13:19:38.623 に答える
0

理由を理解するには、コードに次の行を追加するだけです。

setTimeout(function(){ // wait 4 sec, then slide back down
      console.log(jQuery(this)); //this one
      jQuery(this).slideToggle(600)
      }, 4000);

コンソールを開きます。setTimeout関数内で、$(this) が wi​​ndow オブジェクトを参照していることがわかります。

于 2013-09-04T13:20:46.157 に答える
0

これへの参照を作成する必要があるため、setTimeout に関連付けられた関数を実行するときに、この参照を渡すことができます。

 jQuery(document).ready(
        function()
        {
            jQuery(".toggle").on("click", function() {
                console.log("let the toggling begin!");
                var that = this; // <--- reference to this
                jQuery(this).slideToggle(600, function(){ // slide up
                    setTimeout(function(){ // wait 4 sec, then slide back down
                        jQuery(that).slideToggle(600)
                    }, 4000);
                });
            });
        }
    );
于 2013-09-04T13:25:43.227 に答える