0

我在为我的插件提供公共功能时遇到了麻烦，就像我认为的 jQueryUI 一样。我的插件代码如下。

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

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

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

我不明白为什么这不起作用。我认为调用.myPlugin相同的 DOM 元素会保留数量的值，但显然我在这里遗漏了一些重要的东西。将不胜感激任何帮助和解释。

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

编辑：

在仔细研究了各种模式后，我整理了一些似乎可行的东西。它几乎遵循您的描述，但如果我的方法有什么可怕的错误，请告诉我。基本上，它通过 jQuerysdata方法将我需要的数据附加到 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)
4

1 回答 1

0

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

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

于 2013-06-13T08:39:22.920 回答