Escribir un plugin jQuery que devuelva valores

jquery selector

Question

Estoy escribiendo un complemento jQuery que almacena algunos datos en algunos casos.

Me gustaría escribirlo de una manera muy flexible, donde puedo cambiar un parámetro de entrada para obtener algún valor que haya almacenado el complemento.

Explicación:

Cuando llamo $("#any").myPlugin() , mi complemento se inicializa creando un div y algo adentro. Al hacer clic en un a se almacenará .index() utilizando el método .data() . Si llamo $("#any").myPlugin("getSelection") , me gustaría obtener el valor almacenado con .data() .

Lo que probé:

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

Llamada simple para crear los elementos:

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

Y aquí traté de obtener el índice, sin éxito:

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

Entonces, ¿es posible hacer lo que estoy intentando?

Answer 1

Creo que esta línea es donde comienza su problema

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

como si llamaras al complemento sin especificar un parámetro, la acción no estará definida (no será nula).

podrías considerar cambiar esto a

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

Editar: habiendo mirado más, creo que el problema es que cuando configuras los datos nunca le das una clave de acuerdo con la Documentación del método .data ()

Almacene los datos usando:

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

y recuperarlo así:

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

ver el violín trabajando aquí -> http://jsfiddle.net/7MAUv/

Answer 2

Debe cambiar el orden un poco, así:

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

Puede obtener el índice cliqueado de esta manera:

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

Puede intentarlo aquí , el problema fundamental es que está tratando de devolver un único valor de un bucle .each() , que no funciona. En su lugar, toma los datos del primer objeto que coincide con el selector ( #someElement en el ejemplo). Además .data() almacena otras cosas, por lo que debe darle una clave al valor, como si estuviera usando ''index'' en la versión anterior.