событие jquery bind - PullRequest
Новая
       6

событие jquery bind

1 голос
/ 26 мая 2011

Я программирую панель, используя jquery, вы можете увидеть ее здесь: http://www.taoktalk.com/socialapps/baidu/taozhe/ Мои логики:

  1. Когда я нажимаю каждый из наборов кнопок, значение по умолчанию для входаэлемент изменен;
  2. Каждый раз, когда фокус в элементе ввода очищается, значение;
  3. Если размытие происходит без указания типа чего-либо, значение по умолчанию сбрасывается обратно, но при вводе некоторых слов значениеwords - это значение.

Метод inputWithDefValue реализует логику 2 и 3. Но при логике 1, когда я нажимаю набор кнопок, evnet 'focus' и 'blur' связывались постепенно, поэтомупеременная 'defVal' была неправильной.Как это исправить, спасибо.

Для отладки я использую 'alert (defVal);'в фокусе евнет.

код Javascrip: 

$(function() {
    $( "#tabs" ).tabs();

    var selectedTab = ''
    $( "#tabs" ).bind( "tabsselect", function(event, ui) {
        //selectedTab = ui.panel.id;
    });
    $( "#goods" ).buttonset();
    $( "#shop" ).buttonset();

    var defaultInputVal = '';
    $('input[type=radio]').bind('click', function(){
            switch (this.id){
                case 'goods-url':
                    defaultInputVal = '输入宝贝网址';
                    break;
                case 'goods-name':
                    defaultInputVal = '输入宝贝名称';
                    break;
                case 'goods-id':
                    defaultInputVal = '输入宝贝编号';
                    break;
                case 'shop-url':
                    defaultInputVal = '输入店铺网址';
                    break;
                case 'shop-nick':
                    defaultInputVal = '输入店铺名称';
                    break;
            }
            $('input.input-search').val(defaultInputVal);  //set default value of input.input-search element
            $('input.input-search').inputWithDefValue(defaultInputVal);  //excute inputWithDefValue method every time after click
        });


    //excute inputWithDefValue method without click buttonset
    $('input#input-goods').inputWithDefValue('输入宝贝网址');
    $('input#input-shop').inputWithDefValue('输入店铺网址');
});

$.fn.extend({
    inputWithDefValue: function(defVal){
        this.bind('focus', function(){
            alert(defVal);   //for debug purpose 
            if ($(this).val() == defVal) {
                $(this).val('').css({
                    'color': 'black'
                });
            }
        });

        this.bind('blur', function(){
            if ($(this).val() == '') {
                $(this).val(defVal).css({
                    'color': '#969696'
                });
            }
        });

    }
});

Ответы [ 2 ]

2 голосов
/ 26 мая 2011

Боюсь, ваш код требует довольно серьезного рефакторинга. В текущей реализации при каждом щелчке переключателя вы привязываете все новые и новые функции к событиям размытия и фокусировки - и это только одна из ваших проблем (хотя и самая тяжелая).

Поскольку вы очень хорошо помещаете свои требования в упорядоченный список, становится ясно, что вам нужно привязать к трем событиям: нажимать на кнопки, фокусироваться и размыть поля ввода. Это хороший признак того, что вам придется реализовать следующие функции (без необходимости использования $ .fn.extend): 

$('input[type=radio]').on('click', function() { ... });
$('input.input-search').on('focus', function() { ... });
$('input.input-search').on('blur', function() { ... });

Таким образом, правильным подходом было бы объявить ваш defaultInputVal один раз как объект вместо одной строки, например: 

var defaultInputVal = {
  goods-url  : '输入宝贝网址',
  goods-name : '输入宝贝名称',
  ...
};

На основе идентификатора любого поля ввода вы можете легко получить значение по умолчанию для данного поле. Вышеупомянутые три функции должны выполняться по линиям: 

$('input[type=radio]').on('click', function() { 
  $('input.input-search').val(defaultInputVal[$(this).attr('id')]);
});

$('input.input-search').on('focus', function() {
  var selected_radio_id = $('input[type=radio]:checked').attr('id');
  if ($(this).val() == defaultInputVal[selected_radio_id]) {
    $(this).val('').css({
      'color': 'black'
    });
  }
}).on('blur', function() {
  var selected_radio_id = $('input[type=radio]:checked').attr('id');
  if ($(this).val() == '') {
    $(this).val(defaultInputVal[selected_radio_id]).css({
      'color': '#969696'
    });
  }
});

Код не проверен, но должен указывать правильное направление. Есть еще много возможностей для улучшения, например, не засорять глобальное пространство имен переменными, но это, вероятно, первый шаг, который вам нужно сделать.

0 голосов
/ 27 мая 2011

Измените метод расширения на этот 

$.fn.extend({
    setAsDefault: function(defValue, undefined) {
        this.each(function() {
            var valueToUse = (defValue === undefined) ? this.value : defValue;
            this.defaultValue = valueToUse;
            this.value = valueToUse;
        });
    },
    revertToDefault: function(optionalValue) {
        return this.bind('focus', function() {
            if (this.value == this.defaultValue) {
                $(this).val('').css({
                    'color': 'black'
                });
            }
        }).bind('blur', function() {
            if (this.value == '') {
                $(this).val(this.defaultValue).css({
                    'color': '#969696'
                });
            }
        }).setAsDefault(optionalValue);
    }
});

Он создает два метода: один расширяет объект, реагируя на события размытия и фокуса, а второй - позволяет установить значение по умолчанию.

Для инициализации используйте 

$('input.input-search').revertToDefault('输入宝贝网址');

и для своих радио кнопок используйте 

$('input.input-search').setAsDefault(defaultInputVal);

Полная рабочая демонстрация на http://jsfiddle.net/gaby/FETcS/

...