JQuery .extend（）とJavascriptクラス

Question

JQuery（1.7.1または2.2.3）を使用して、動的オブジェクトにJavaオブジェクトの一部を組み込もうとしていました。これを行うために、JQuery .extend()関数を使用して、ドキュメントに追加する基本的なJQueryオブジェクトを増やすことを考えました。

質問の最後に提示されているように修正した私のアプローチには何か問題があると思いますが、説明できない誤解を招くような動作が見つかって、完全に働くかどうかはまったくありません。

私のコードの全体的な目的は、この要素がクリックされたときにいくつかの特定の処理を適用し、他の処理を行うために、コードに "button"要素（<div>セクション）を追加することです。基本的には、私の "ボタン" JQueryオブジェクトは、私が作成したButton JavaScriptオブジェクト/クラス（オブジェクト指向のアプローチでは期待したような）のように動作します。ここで

はButtonオブジェクトのための単純化されたコードです：

// Create a "JQuery+Button" object 
function createButton() 
{ 
    var result = $("<a href='#' id='button'></a>"); 
    result.extend(new Button(false)); // Can also be done with result = $.extend(result, new Button(false)); 
    result.append("clickable button"); // A dummy button text, see below 

    result.printState(); // OK: print "false" 
    return result; 
} 

そしてここで「作成+アクション」です。ここで

function Button(myState) 
{ 
    this.setState(myState); 
} 
Button.prototype.printState = function() 
{ 
    console.log(this.state); 
} 
Button.prototype.setState = function(myState) 
{ 
    this.state = myState; 
} 

は、オブジェクトを作成するjQueryの+ボタンの基本コードですコードの一部：

function associateButtons() 
{ 
    var myButton = createButton(); 

    // Add an action on click => Works "as excepted" => print the state when the button will be clicked 
    myButton.on("click", myButton, function(event) { 
     console.log("click inner HTML:" + event.data.html()); // OK: print the JQuery associated HTML 
     event.data.printState(); // OK: call the associated function 
    }); 


    $("#buttons_container").append(myButton); // Add the button to the page at the specified place 
    $("#buttons_container").append(myButton.clone()); // Add the same button a second time, but won't have the "onclick" bind 

    // Do an action no each button => Does not work! => The function is undefined 
    $("#buttons_container #button").each(function(index,element) { 
     console.log("each inner HTML:" + $(element).html()); // OK: print the JQuery associated HTML, same as above ; also works with $(this) 
     $(element).printState(); // FAIL: "TypeError: undefined is not a function" 
    }); 
} 

次に、テストを実行してください：

associateButtons(); 

「それぞれの」メソッドが動作しないうちに「イベント」メソッドが機能するのはなぜですか？私は、イベントマネージャー（明らかに、構造体event.dataを介してJQuery + Buttonオブジェクトをカプセル化するオブジェクトである）が、各マネージャー（JQueryではない）によって渡された要素とは異なる+ Buttonオブジェクトだが「シンプルな」JQueryオブジェクト）。

私は回避策を見つけることができたが、jQueryの中にボタンをカプセル化すること.data()機能を通じて追加しました：

イベント（ event.data.data("button")）で

// Create a "JQuery+Button" object 
function createButton() 
{ 
    var result = $("<a href='#' id='button'></a>"); 
    result.data("button", new Button(false)); 
    result.append("clickable button"); // A dummy button text, see below 

    result.data("button").printState(); // OK: print "false" 
    return result; 
} 

、そのオブジェクトで作業し、「各」（$(element).data("button")）これはうまくいく。

しかし、私が理想的な "JQuery + Button"オブジェクトの定義にしたいのは、オブジェクト指向ではありません。

これを達成する方法はありますか、「それぞれの」治療で何かが欠けていますか？事前に

感謝;）

Answer 1

1）あなたは悪で同じHTML文書に同じid（"button"）といくつかのボタンを追加しています。

2）あなたがresult.extend(new Button(false));を行うと、あなただけのjQuery forEachループ内のHTML要素、また、明らかに、$("#buttons_container #button")によって返されたjQueryオブジェクト、またjQueryのオブジェクトにresultオブジェクト、ないにプロパティを追加します。

EDIT：あなたがこれを行う場合は

：

var myButton = createButton(); 
myButton.on("click", myButton, function(event) { (...) } 

をあなたはがを拡張されcreateButton関数によって返されたオブジェクトへのクリックイベントハンドラを追加しているので、あなたがアクセス権を持っていますそれに対するprintStateプロパティ。

は、しかし、あなたが行う

$("#buttons_container #button").each(function(index,element) { 
    console.log("each inner HTML:" + $(element).html()); 
    $(element).printState(); 
}); 

$(element)はが拡張ではない基本的なjQueryオブジェクト、であるので、それにはprintStateプロパティがありません。

また、jQuery plugin resourcesをご覧ください。