создание функции JQuery - PullRequest
0 голосов
/ 24 декабря 2010

Извините, что беспокою вас, ребята, еще раз в канун Рождества, но мне нужна помощь в создании функции JQuery многократного использования.Я "плохо обработал" этот набор кода, который все работает.Но я бы очень хотел поставить это как функцию, чтобы мне не приходилось повторять все для каждой формы.Я не слишком уверен в том, как все операторы if можно комбинировать и т. Д., Поэтому я написал все как есть.Любая помощь высоко ценится - О, я полагаю, это также может быть какой-то плагин, но это может быть следующим шагом, если я пойму, как работает функция.(Я надеюсь) вещь, как я могу выйти из любой функции, если нет никаких сообщений об ошибках, чтобы фактически отправить форму?

Ответы [ 3 ]

3 голосов
/ 24 декабря 2010

Некоторые предложения:

1) Как указывает Clour Blind, вы можете расширить jQuery, назначив новые функции jQuery.fn (иначе $.fn, если вы не используете noConflict).

2) У вас есть лот из

$(this).foo();
$(this).bar();
$(this).baz();

... и т. Д. Каждый раз, когда вы делаете это, jQuery должен выполнить что-то вроде четырех вызовов функций и выделить память для нового экземпляра jQuery.Вместо этого сделайте это один раз, а затем повторно используйте результат:

var $this = $(this); // You can call it whatever you like
$this.foo();
$this.bar();
$this.baz();

3) Вы совершенно правы, вы можете выделить общность вещей и сделать из них вещь многократного использования.Например, все ваши проверочные функции blur одинаковы с немного разными кусочками:

$(':input[min]').live('blur',function(){
    if($(this).attr('min') > parseInt($(this).val(), 10) ){
        $(this).next('.errormsg').html( 'OOPs ... the minimum value is '+$(this).attr('min') ); 
        $(this).parent('form').children('input[type=submit]').hide();
        $(this).focus();
    } else {}
    return false;   
});

Так что, возможно:

$.fn.validateOnBlur = function(attrName, errMsg, validator) {
    this.live('blur', function() {
        var $this = $(this),
            limit = parseInt($this.attr(attrName), 10);
        if(!validator(limit, parseInt($this.val(), 10) ){
            $this.next('.errormsg').html(errMsg.replace("%limit%", limit)); 
            $this.parent('form').children('input[type=submit]').hide();
            $this.focus();
        } else {}
        return false;   
    });
};

Я сделал несколько очень легких переделоктам:

  • Подставляя attrName для 'min' или 'max'.
  • Добавление радикального параметра, 10, для вызовов на parseInt.Я предполагаю, что ваши значения должны быть десятичными, поэтому, если пользователь вводит «08», вам нужно значение 8, а не ошибка (потому что «08» является недопустимым восьмеричным обозначением).Если задать parseInt второй параметр, он всегда будет использовать эту базу (10 = десятичное число).
  • Найдите атрибут ограничения один раз и запомните его.
  • Параметризация (в очень минимальной форме) сообщение об ошибке, а затем используйте replace для замены предельного значения для токена %limit%.

, который вы затем использовали бы следующим образом:

$(':input[max]').validateOnBlur(
    'max',
    'OOPs ... the maximum value is %limit%',
    function(limit, value) {
        return value <= limit;
    }
);
$(':input[min]').validateOnBlur(
    'min',
    'OOPs ... the minimum value is %limit%',
    function(limit, value) {
        return value >= limit;
    }
);

Или, скорее, вы бы использовали это так:

// In your general purpose stuff
var comparators = {
    checkNumberMin: function(limit, value) {
        return value >= limit;
    },
    checkNumberMax: function(limit, value) {
        return value <= limit;
    }
};

// And then in your specific code using it
$(':input[max]').validateOnBlur(
    'max',
    'OOPs ... the maximum value is %limit%',
    comparators.checkNumberMax
);
$(':input[min]').validateOnBlur(
    'min',
    'OOPs ... the minimum value is %limit%',
    comparators.checkNumberMin
);

Возможно, вы можете пойти дальше и подключить все в одной функции, а не просто blur, но вы поняли идею.

Примечание: для простых примеров я использовал несколько анонимных функций выше, но я не фанат их на практике; больше здесь .

2 голосов
/ 24 декабря 2010

Синтаксис для создания функции JQuery выглядит следующим образом:

$.fn.functionname = (function(param1, param2) {

});

// Вы также можете вернуть значение.

Обновление № 1

Помните, что вы должны обернуть весь свой код JQuery в это:

$(function() {

});

Итак, теперь у вас есть:

$(function() {
   $.fn.functionname = (function(param1, param2) {

   });
});

Обновление № 2

Также помните, что функции, которые вы создаете таким образом, могут вызываться в наборе jQuery, например:

$("a.readmore").functionname(); //That is, if you don't have parameters
$("a.readmore").functionname(1, 2);

Это основное, и я надеюсь, что это поможет.

0 голосов
/ 24 декабря 2010

Почему у вас нет этого кода в файле JS, а затем включите в файл как внешний файл JS. Также я вижу, что вы используете $ (this) в каждой строке живой функции, например

$(this).css({'background-color':'#FFEEEE' });
$(this).parent('form').children('input[type=submit]').hide();

Вместо этого вы можете определить локальную переменную и присвоить этой переменной $ (this) и обратиться к ней через. например:

$(':input:visible').live
(
    'blur',
    function()
    {
        var $this = $(this);
        if($this.attr('required')) 
        {
            if($this.val() == '' ) {  
            $this.css({'background-color':'#FFEEEE' });
            $this.parent('form').children('input[type=submit]').hide();
            $this.next('.errormsg').html('OOPs ... '+$this.prev('label').html()+'  is required');
            $this.focus();
            $this.attr('placeholder').hide(); } 
            else {
            $this.css({'background-color':'#FFF' , 'border-color':'#999999'});
            $this.next('.errormsg').empty();
            $this.parent('form').children('input[type=submit]').show(); }
        }
    return false;   
    }
);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...