Question

我在为我的插件提供公共函数时遇到了麻烦，我认为jQueryUI是什么。我的插件代码如下。

调用$("#someField").myPlugin({'editable':true});时，它会迭代指定的元素，在这种情况下只会有一个#someField并将amount设置为0。

然后从代码我想要调用公共函数set10，它会影响我之前传递给插件的元素#someField。

因此，当通过switch语句调用$("#someField").myPlugin("set10");时，它将数量设置为10.现在，当我单击字段并执行click内的代码时，它再次显示数量为0。

我不明白为什么这不起作用。我认为在同一个DOM元素上调用.myPlugin会保留金额的值，但显然我在这里缺少一些重要的东西。非常感谢任何帮助和解释。

(function($)
    {
        $.fn.myPlugin=function(options) {


            // default settings

            var settings = $.extend( {
                'editable': true                
            }, options);

            return this.each(function() 
            {
                var amount=0;

                switch(options)
                {
                    case "set10":
                        set10();
                }

                var t=$(this);

                function set10()
                {           
                    amount=10;
                }

                t.on("click", function(e) 
                {
                    console.log(amount);
                });

            });
        };

    })(jQuery)

    $("#someField").myPlugin({'editable':true});
    $("#someField").myPlugin("set10");

修改

仔细观察各种模式后，我把一些似乎有用的东西放在一起。它几乎跟你所描述的一样，但如果我的方法有任何可怕的错误，请告诉我。基本上它通过jQuerys data方法将我需要的数据附加到HTML元素本身。然后，当调用函数时，它检查选项是否实际上是一个字符串，并使用我们当前在每个循环中具有的特定DOM元素的上下文调用适当的方法。这是公共方法实现方式的简化版本吗？就像我说它在我的插件中有效但是我想要正确地做，并且担心我的方法仍然存在一些问题。

(function($)
{
    $.fn.myPlugin=function(options) {

        // default settings

        var settings = $.extend( {
            'editable': true                
        }, options);

        return this.each(function() 
        {
            if(typeof options == 'string')
            {
                switch(options)
                {
                    case "set10":
                    {
                        set10.call(this);
                        return;
                    }
                }
            }

            var amount=0;

            var t=$(this);

            function set10()
            {           
                var t=$(this);

                amount=10;

                $.data(t[0],"amount",amount);
            }

            t.on("click", function(e) 
            {
                if($.data(t[0],"amount"))
                    amount = $.data(t[0],"amount",amount);
                console.log(amount);
            });

        });
    };

})(jQuery)

Answer 1

默认情况下，Jquery插件在每次调用时都不会保持持久性。你在这里做的是重新初始化整个插件两次，每个声明都是一个全新的对象，它不知道任何先前的声明。

如果您想将此作为JQuery插件执行，我担心您可能需要完全重新考虑您的解决方案。一般而言，外部函数由作为选项和/或事件传递的回调触发。您还可以使用.data（）函数在DOM元素之间传递数据（该函数创建数据 - dom对象本身的任何属性）。

简单的jQuery插件中的简单公共函数

1 个答案: