Question

对于我想编写的JQuery插件，我想存储一个局部变量，其范围仅限于选择器标识的HTML。在下面的基本示例中，HTML页面有两个表单元素，我在每个表单元素上单独选择，在每个实例内部我希望得到表单包含的文本元素数量的计数。在下面的示例中，“_elements”始终包含调用的最后一个选择器的文本输入元素的数量。现在我认为这是因为Javascript的块级范围和闭包，但不确定如何实现它。有人可以告诉我我的方式的错误。

请不要提出不同的方法（即根本不存储变量，总是直接选择匹配元素的数量 - 我知道这样可行但这只是问题的简化示例我有局部变量

<html>
    <head>
        <script language="javascript" src="jquery-1.4.4.min.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">

            (function ($) {

                var methods = {

                    Setup: function (options) {
                        if ($(this).length == 0)
                            throw new Error("AutoSave() selector did not find required element");
                        if ($(this).length > 1)
                            throw new Error("AutoSave() is not designed to handle a selector that matches two or more elements!");

                        _elements = $('INPUT[TYPE=TEXT]', this)
                        _elements.length;

                        return this;
                    },
                    NumOfElements: function (options) {
                        alert(_elements.length);
                        return this;
                    }
                };

                $.fn.autoSave = function (method) {

                    if (methods[method]) {
                        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
                    } else if (typeof method === 'object' || !method) {
                        return methods.Setup.apply(this, arguments);
                    } else {
                        $.error('Method ' + method + ' does not exist on jQuery.AjaxClickEvent');
                    }
                };

            })(jQuery);

        </script>
    </head>
    <body>
        <form method="post" action="" id="myForm" name="myForm">
            <input type="text" id="txt1" name="txt2" />
            <input type="submit" id="submit" name="submit" />
        </form>
        <form method="post" action="" id="myForm2" name="myForm2">
            <input type="text" id="Text1" name="Text1" />
            <input type="text" id="Text2" name="Text2" />
            <input type="submit" id="submit1" name="submit1" />
        </form>
<script>
    $(document).ready(function () {
        $("#myForm").autoSave();
        $("#myForm").autoSave('NumOfElements');  // Shows 1
        $("#myForm2").autoSave();
        $("#myForm2").autoSave('NumOfElements');  // Shows 2
        $("#myForm").autoSave('NumOfElements');  // Shows 2 (should be 1)
    });
</script>
    </body>
</html>

Answer 1

好的，所以你的代码很好，你不是疯了。问题是methods.Setup函数中的this是而不是 jQuery对象/ html节点。这是方法单身。因此，您总是修改相同的_elements - 因此在最后一个示例中为2。

解决方案是添加：

var methods = {
  my_form: null,
  ...
}

然后当它全部被实例化时：

$.fn.autoSave = function (method) {
  methods.my_form = this;

然后更改方法中的this调用以引用methods.my_form。然后，您将拥有对DOM的适当对象引用。（我还建议将_elements存储在DOM中的HTML节点上，而不是“在以太网中” - 使用data http://api.jquery.com/data/）

如何为jquery插件选择的每个元素声明变量的本地实例

1 个答案: