Как объявить локальный экземпляр переменной для каждого элемента, выбранного плагином jquery - PullRequest
1 голос
/ 06 января 2011

Для плагина 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>

1 Ответ

1 голос
/ 06 января 2011

ОК, так что ваш код в порядке, вы не сумасшедший.Проблема в том, что this в методе method.Setup является , а не узлом jQuery object / html.Это методы синглтон.Таким образом, вы всегда изменяете одни и те же элементы _element - следовательно, в последнем примере - 2.

Решение состоит в том, чтобы добавить:

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

И затем, когда все это будет создано:

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

Затем измените вызовы this в ваших методах, чтобы они ссылались на method.my_form.Тогда у вас будет соответствующая ссылка на объект DOM.(Я бы также предложил хранить _элементы на узле HTML в DOM, а не «в эфире» - используйте data http://api.jquery.com/data/)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...