まずコードの一部を見てみましょう:
jQuery.fn.extend(
{
myOwnMember: 3,
getMyOwnMember: function () { return this.myOwnMember; },
setMyOwnMember: function (v) { this.myOwnMember = v; return this.myOwnMember; }
}
$("body").myOwnMember; //3
$("body" ).setMyOwnMember(4); //4
$("body").getMyOwnMember(); //3
このコードはメンバー myOwnMember を拡張しますjQuery オブジェクトに 2 つの関数 getMyOwnMember と setMyOwnMember を使用して、それぞれ myOwnMember の値を返し、値を設定します。しかし、setMyOwnMember が機能しないことがわかります。再度 getMyOwnMember を実行すると、初期値が返されます。これはなぜでしょうか?その理由は、$("body") は毎回新しいオブジェクトを作成するため、$("body") の myOwnMember が毎回初期値になるためです。コードを次のように変更すると:
{
myOwnMember: 3,
getMyOwnMember: function () { return this.myOwnMember; },
setMyOwnMember: function (v) { this.myOwnMember = v; return this .myOwnMember; }
}
);
var body = $("body");
body.getMyOwnMember; // 3
body.setMyOwnMember(4); //4
body.getMyOwnMember(); //4
これは $("body") のみであるため、これは一度作成されると、その後の参照はすべて body 変数を通じて行われます。ただし、この方法では、グローバル スコープで body 変数を参照することができないため、依然として $("body") を使用して dom ノードを取得しています。 jQuery オブジェクト拡張変数の値はどうすれば保存できますか?解決策は、変数を jQuery オブジェクトではなく dom ノードに保存することです。dom ノード上に作成された jQuery オブジェクトの数に関係なく、それらはすべて同じ dom ノードを指します。したがって、コードを次のように変更します。
コードをコピーします
getMyOwnMember: function () { return this[0].myOwnMember; },
setMyOwnMember: function (v) { this[0].myOwnMember = v; return this[0].myOwnMember; }
}
);
$("body").getMyOwnMember(); ); //4
$("body").getMyOwnMember(); //4