1

ユーザー定義のメソッドを持つ要素があります。要素は、より大きなオブジェクトの一部として作成され、ドキュメントの読み込み時に挿入されます。オブジェクトの要素を直接アドレス指定することで、いつでもそのメソッドを呼び出すことができます。

要素はtabs[0].bubbles[0].elementであり、メソッドは.expand()

（このオブジェクト内には複数の要素があり、それぞれに独自の.expand（）メソッドがあります）

だから、ライン

tabs[0].bubbles[0].element.expand();

その要素のメソッドを呼び出します。ただし、特定のイベントが発生すると、次のように要素を選択できる関数が呼び出されます。

bubble = $(this).parent(); // the bubble element is the event handlers parent

ただし、行

bubble.expand();
// or 
$(bubble).expand();
// or
$(bubble)[0].expand();

メソッドを呼び出さないでください。

この線

tabs[0].bubbles[0].element.expand();

メソッドを呼び出します。ただし、この行を使用してメソッドを呼び出すことはできません。これは、さまざまな要素が多数あり、関数内から配列の要素のインデックス番号を見つけることができないためです。

正しい要素を選択していないのではないかと思いましたが

($(bubble)[0] === $(tabs[0].bubbles[0].element)[0])

trueを返します（明らかに、これbubbleはに対応する必要がある要素である場合にのみ発生しますtabs[0].bubbles[0].element）。

tabs[0].bubbles[0].element$(bubble)[0]またはと同じではありません$(bubble)[0]。

JQueryを使用して選択された関数内からメソッドを呼び出すにはどうすればよいですか？

編集

問題は、オブジェクトの作成方法にあると思います。オブジェクトの要素フィールドは、このようなコンストラクターメソッドで作成されます。

this.element = $('<div class="bubble ' + this.type + '">\
    <div class="bubbleCentre ' + this.state + ' "> \
        <img class="bubbleIcon" src="img/dash/' + this.icon + '"> \
        <span class="status">' + text + '</span> \
    </div> \
</div>');

.expand()関数はこのように作成されます。

this.element.expand = function ()
{
    // method
    alert('method executing');
}

このようなメソッドを呼び出すことができます

tabs[0].bubbles[0].element.expand();

しかし、bubble.get(0).expand();またはbubble.expand();何もしません。

ただし、次のようにメソッドを定義すると、次のようになります。

this.element.get(0).expand = function ()
{
    // method
    alert('method executing');
}

これで、期待どおりにメソッドを呼び出すことができます

bubble.get(0).expand(); // expands bubble as you would expect

メソッドが呼び出されるので、これで十分です。そうするためのもっと簡単な方法があるはずだと思われます。イベントコールバック関数でバブルを選択する場合を除いて、jQueryを関与させる必要がある理由がわかりません。何かご意見は？

が定義されているときに文字列の周りから$（）を削除しようとしましたが（メソッドが定義されているときに.elementも削除しました）、どのように試してもメソッドをまったく呼び出すことができませんでした。.get(0).expand()

4

2 に答える 2

2

問題は、要素の作成方法にありました。

次のような要素を作成します。

this.element = document.createElement('div');                                                               // first create DOM element

// append child elements
$(this.element).addClass('bubble ' + this.type);
$('<div class="bubbleCentre ' + this.state + ' "></div>').appendTo(this.element)                            // append centre
.append('<img class="bubbleIcon" src="img/dash/' + this.icon + '" title="' + type.capitalize()  + '">')     // append icon to centre
.append('<span class="status">' + text + '</span>')                                                         // append status to centre
.parent().append('<div class="subbubbles"><div style="position: relative;"></div></div>');                  // append subbubbles box

私は次のようにメソッドを定義します:

this.element.expand = function ()
{
    // method running
    alert('method running');
}

私はこのようにメソッドを呼び出します:

bubble.get(0).expand();

それはすべてうまくいくようです。みんなの助けに感謝します。

于 2012-06-23T12:41:25.313 に答える
1

一致したセットの各要素に対してメソッドを呼び出したり、最後の一致の値を取得したりする場合は、新しい jquery 関数を作成できます。

$.fn.invoke = function(name) {
    var args = Array.prototype.slice.call(arguments, 1);
    var ret;

    this.each(function() {
        ret = this[name].apply(this, args);
    });

    return typeof ret !== 'undefined' ? ret : this;
};

http://jsfiddle.net/eQLHT/

于 2013-03-28T12:56:52.850 に答える