Напишите плагин jQuery, который возвращает значения

Question

Я пишу плагин jQuery, который в некоторых случаях хранит некоторые данные.

Я хотел бы написать это очень гибким способом, где я могу изменить входной параметр для получения некоторого значениякоторые были сохранены плагином.

Объяснение:

Когда я вызываю $("#any").myPlugin(), мой плагин инициализирует создание div и некоторых 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"));

Итак, можно ли сделать то, что я пытаюсь?

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";

, как будто вы вызываете плагин без указания параметра, действие будет неопределенным (не нулевым).

Вы можете изменить это значение на

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

Редактировать: Посмотрев дальше, я думаю, проблема в том, что когда вы устанавливаете данные, вы никогда не даете им ключ в соответствии с Документацией метода .data ()

Сохраните данные, используя:

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

и получить его так:

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

см. Рабочую скрипку здесь -> http://jsfiddle.net/7MAUv/