2

次のコードがあります。

$(document).ready(function(){    
    $("button.continue").click(function(){
        $(this).html("Hello!");
    });
});

これは完璧に機能しますが、全体を次のようにしたいと思います。

$(document).ready(function(){    
    $("button.continue").click().html("Hello!");
});

私の質問は次のとおりです。

  1. click() と次のイベント、この場合は html() をそのように使用できますか (関数部分に目を向けることなく)。
  2. そうでない場合、次のような背後にある仕組みを考えるので、これを行うことができないのはなぜですか。ユーザーが選択した要素をクリックすると、その中の HTML テキストが別のものに変更されます。
  3. これがこの背後にある論理を考える方法または推論する方法ではない場合、これにどのようにアプローチすればよいですか
4

2 に答える 2

5

jQuery 関数はオブジェクト自体を返すため、次のようなメソッドをチェーンできます。

element.css('attribute', 'value').html('value').append('element').click(function() {});

しかし、イベント ハンドラーをバインドする場合は、イベントが発生したときに呼び出される.click()コールバックにロジックを格納する必要があります。

連鎖が実際にどのように機能するかの例:

var testObject = {
    methodA : function() {
        // some logic
        return this;
    },
    methodB : function() {
        // some logic
        return this;
    }
}
// you can than simply call
testObject.methodA().methodB();
于 2013-02-18T23:27:42.060 に答える
0

希望どおりに動作する API を作成することもできますが、実際には、これは使用している特定のライブラリである jQuery の動作方法ではありません。jQuery の click メソッドは、一致した要素がクリックされるたびに呼び出されるイベント リスナー関数を受け取ります。これは、最新のイベントベースの UI で一般的に使用される典型的な関数型プログラマ パターンです。

このスタイルのコードが少し読みにくいと思われる場合は、CoffeeScript を試してください。CoffeeScript は javascript にコンパイルされ、このような一般的なパターンを実装しやすくする言語です。CoffeeScript で同等のものは次のようになります。

$(document).ready ->
    $('button.continue').click ->
        $(this).html "Hello"

詳細については、http: //coffeescript.org/をご覧ください。

于 2013-02-18T23:45:37.910 に答える