Write a jQuery plugin that returns values

Question

I am writing a jQuery plugin that stores some data in some cases.

I would like to write this in a very flexible way, where I can change the input parameter to get some value that was saved by the plugin.

Explanation:

When I call $("#any").myPlugin(), my plugin initializes the creation of divsome ainside too. By clicking on a, you save it .index()using the method .data(). If I call $("#any").myPlugin("getSelection"), then I would like to get the value stored with .data().

What I tried:

(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);

A simple call to create elements:

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

And here I tried to get the index without success:

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

So can I do what I'm trying?

Answer 1

, :

(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' .

Answer 2

,

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

, undefined ( null).

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

: , , , , .data( )

, :

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

:

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

. → http://jsfiddle.net/7MAUv/