6

場合によってはデータを保存する jQuery プラグインを作成しています。

入力パラメーターを変更して、プラグインによって保存された値を取得できる、非常に柔軟な方法で記述したいと思います。

説明：

を呼び出す$("#any").myPlugin()と、プラグインが初期化され、内部にadivと someが作成されます。aをクリックすると、メソッドを使用してa保存されます。私が呼び出すと、に保存されている値を取得したいと思います。.index().data()$("#any").myPlugin("getSelection").data()

私が試したこと：

(function ($) {
    $.fn.myPlugin = function (action) {
        if (action == null) action = "initialize";

        return this.each(function ($this) {
            $this = $(this);

            if (action == "initialize") {
                $this.html('<div></div>');
                var div = $("div", $this);

                div.append('<a>A</a>').append('<a>B</a>').append('<a>C</a>');

                div.children("a").each(function (i) {
                    $(this).click(function (event) {
                        // Here I store the index.
                        $this.data($(this).index());
                        event.preventDefault();
                        return false;
                    });
                });

                return $this;
            } else if (action == "getSelection") {
                // With this action, I tried to get the stored value.
                return $this.data("selectedValue");
            }
        });
    };
})(jQuery);

要素を作成するための単純な呼び出し:

$("#someElement").myPlugin();

そして、ここでインデックスを取得しようとしましたが、成功しませんでした:

alert($("#someElement").myPlugin("getSelection"));

それで、私がしようとしていることをすることは可能ですか?

4

2 に答える 2

12

次のように、順序を少し変更する必要があります。

(function ($) {
    $.fn.myPlugin = function (action) {
        action = action || "initialize";

        if (action == "getSelection") {
          return this.data('index');
        }

        return this.each(function ($this) {
            $this = $(this);

            if (action == "initialize") {
                $this.html('<div></div>');
                var div = $("div", $this);

                div.append('<a>A</a>').append('<a>B</a>').append('<a>C</a>');

                div.children("a").each(function (i) {
                    $(this).click(function (event) {
                        // Here I store the index.
                        $this.data('index', $(this).index());
                        event.preventDefault();
                        return false;
                    });
                });

                return $this;
            }
        });
    };
})(jQuery);

クリックされたインデックスは次のように取得できます。

alert($("#someElement").myPlugin("getSelection"));

ここで試してみることができます。根本的な問題は、ループから単一の値を返そうとしていることですが.each()、これは機能しません。これは、代わりに、セレクター（#someElement例）に一致する最初のオブジェクトからデータを取得します。他のものも.data()保存するので、上記のバージョンで使用しているように、値にキーを指定する必要があります。'index'

于 2010-09-02T15:10:59.747 に答える
1

この行があなたの問題の始まりだと思います

if (action == null) action = "initialize";

パラメータを指定せずにプラグインを呼び出した場合と同様に、アクションは未定義になります (null ではありません)。

これを次のように変更することを検討できます

if (!(action)) action = "initialize";

編集：さらに見てみると、問題は、データを設定するときに、ドキュメントの .data() メソッドに従ってキーを決して与えないことだと思います

以下を使用してデータを保存します。

$this.data("selectedValue",$(this).index());

次のように取得します。

$('#plugin-container').data("selectedValue")

ここで動作するフィドルを参照してください --> http://jsfiddle.net/7MAUv/

于 2010-09-02T14:41:59.347 に答える