代码之家 › 专栏 › 技术社区 › Erick Petrucelli

编写一个返回值的jQuery插件

jquery-chaining chaining jquery-plugins jquery

Erick Petrucelli · 技术社区 · 14 年前

我想用一种非常灵活的方式来编写它,在这里我可以更改一个输入参数来获得插件存储的一些值。

说明:

$("#any").myPlugin() ,我的插件初始化创建 div 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"));

那么,有没有可能做到我想做的?

2 回复 | 直到 14 年前

Nick Craver 14 年前

你需要改变一下顺序,像这样:

(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() 商店其他 'index'

Jamiec 14 年前

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

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

就像调用插件而不指定参数一样,action将是未定义的(不是null)。

你可以考虑把这个改成

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

Documentation of .data() method

使用以下方法存储数据:

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

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

请参见此处的工作小提琴--> http://jsfiddle.net/7MAUv/