编写一个返回值的 jQuery 插件

Question

我正在编写一个 jQuery 插件，在某些情况下存储一些数据。

我想以一种非常灵活的方式编写它，我可以更改输入参数以获得插件存储的一些值。

说明：

当我调用$("#any").myPlugin() 时，我的插件初始化创建一个div 和一些a 在里面。 单击a 将使用.data() 方法将其存储在.index()。 如果我调用$("#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"));

You can give it a try here，根本问题是您试图从.each() 循环中返回单个值，但这是行不通的。而是从与选择器匹配的第一个对象中获取数据（示例中为#someElement）。 .data() 也存储 other 东西，所以你需要给你的值一个键，就像我在上面的版本中使用 'index' 一样。

Answer 2

我相信这条线是你的问题开始的地方

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

如果你在没有指定参数的情况下调用插件，动作将是未定义的（不为空）。

您可以考虑将其更改为

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

编辑：经过进一步研究，我认为问题在于，当您设置数据时，您永远不会根据Documentation of .data() method给它一个密钥

使用以下方式存储数据：

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

并像这样检索它：

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

在这里查看工作小提琴 --> http://jsfiddle.net/7MAUv/