1

これは非常に平凡な質問かもしれませんが、これは私が作成した最初の jQuery プラグインであり、JavaScript のスコープ ルールを理解するのが少し曖昧です。

Stack Overflow API をラップする単純な jQuery プラグインを作成しようとしています。私は、Flair API を使用することから始めています。

プラグインを可能な限り構成可能にして、ドメインとユーザー ID を簡単に渡して、複数の Flair を生成できるようにしたかったのです。

    var superUser = $.jStackOverflow.flair({domain:"superuser.com", id: 30162, parentId:'#su-flair'});
    var stackOverflow = $.jStackOverflow.flair({domain:"stackoverflow.com", id: 55954, parentId:'#so-flair'});

問題は、2 番目の呼び出しを行うときに、何らかの形で正しい domain および id パラメーターを使用しているが、HTML を作成するためにコールバック関数で使用している parentId フィールドが最初のパラメーターを使用していることです。

プラグインはこちら、HTMLはこちら

4

2 に答える 2

0

問題は、プラグインのインスタンスが 1 つしかないことです。これは、2 つの呼び出しが$.jStackOverflow.flair()1 つのオブジェクトの内部データを操作するため、互いに干渉することを意味します。

2 つの呼び出しの間に遅延があるとどうなるかのデモを確認してください (下部にある 2 つのボタンをクリックします)。

http://jsbin.com/esovu (編集するにはhttp://jsbin.com/esovu/edit

突然それは働き始めます。そのため、1 つのページで複数のインスタンスをサポートするプラグインを作成する方法を調査する必要があります。

複数のインスタンスがサポートする「適切な」jQueryプラグインを選択して、その方法を確認できます。

例jQuery カルーセル。

1 つのページに複数の Carousel インスタンスを作成できるように行がどのように相互作用するかを確認します (コードは jQuery Carousel ソースから取得)

$.fn.jcarousel = function(o) { //this would match your `jStackOverflow`
    return this.each(function() { //for each matched element return a new carousel
        new $jc(this, o);
    });
};
...
var defaults = {
...
};
...
$.jcarousel = function(e, o) { //the acutal constructor
...
}
...
$jc.fn.extend({
...
});
于 2010-03-13T10:20:52.677 に答える