1

非常に簡単な質問だと思います。実際、私はそれを理解していないのはばかげていると思います。ここに私のコードの例があります：

http://jsfiddle.net/joeljoelbinks/pVSDL/

抜粋：

function lighten() {

jQuery(this).css('opacity', '0.5');
jQuery(this).html('DO IT!');
}

function darken() {

jQuery(this).css('opacity', '1');
jQuery(this).html('CLICK TO EXPAND');
}

function expand() {

jQuery(this).off('click', expand);
jQuery(this).off('mouseover', lighten);
jQuery(this).on('click', contract);
darken(); //this doesn't get called
jQuery(this).animate({width: '200px', height: '200px'}, 500);

}

function contract() {

jQuery(this).off('click', contract);
jQuery(this).on('mouseover', lighten);
jQuery(this).on('click', expand);
lighten(); //this doesn't get called
jQuery(this).animate({width: '100px', height: '100px'}, 250);

}

これは、私が取り組んでいるWebサイトに実装している拡張divデザインの簡略化されたプロトタイプです。extend（）またはcontract（）関数内でlighten（）およびdarken（）関数が呼び出されないことを除いて、すべてが設計どおりに機能します。関数内からそれらを呼び出すために複数の方法を試しましたが、機能しません。それを修正する必要があることを示すために、それらをそこに残したことに注意してください。展開/縮小機能内でそれらを起動するにはどうすればよいですか？これらは、最初にコーディングしたマウスオーバー/マウスアウトイベントにバインドされたときと同じように機能しますが、他の関数内では機能しません。それらにalert（）関数を実行させると、すべてのコンテキストで機能しますが、JQuery（this）を変更しようとしている場合は機能しません。

ボーナスの質問：また、jsの上部を見てください：別々にバインドする必要がある現在のコードとは対照的に、両方の変数を同じイベントにバインドするにはどうすればよいですか？私はbind（）と他のいくつかのことを試しましたが、それらを別々に行う場合にのみバインドさせることができます。これはDRYの原則に違反します;）

4

1 に答える 1

4

thisあなたはそれが正しいことを指していることを確認する必要があります：

darken.call(this);

それ以外の

darken();

の値は関数呼び出しごとにthis決定されるため、を使用して値が正しいことを確認する必要があります。または、要素が影響を与えるパラメータを受け取るように、関数を変更することもできます。.call()darken()lighten()

編集—「ボーナス」に関しては、「クリック」（またはその他）にバインドする必要がある2つのイベントハンドラーへの呼び出しを「シリアル化」する他の関数がなければ、これを行うことはできません。それは確かに可能ですが、それは疑わしいほど価値があります。問題の2つの関数を呼び出すために、いつでも1つの関数を作成することができます（ここでも、this適切に明示的に渡すように注意してください）。

于 2012-11-29T00:50:00.437 に答える