Question

我正在使用jquery编写一个面板，你可以在这里看到它：http://www.taoktalk.com/socialapps/baidu/taozhe/ 我的逻辑是：

当我单击每个按钮组时，输入元素的defaut值发生了变化;
每次在输入元素中聚焦时，该值都被清除;
如果模糊而没有输入任何内容，则重置默认值，但如果输入某些单词，则单词为值。

方法'inputWithDefValue'实现逻辑2和3.但是逻辑1，当我点击按钮设置时，evnet'focus'和'blur'以递增方式绑定，因此'defVal'变量不正确。如何解决这个问题，谢谢。

对于调试，我使用'alert（defVal）;'聚焦evnet。

Javascrip Code：

$(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'
                });
            }
        });

    }
});

Answer 1

我担心你的代码需要非常繁重的重构。使用您当前的实现，在每个单选按钮上单击，您可以将新功能和新功能绑定到模糊和焦点事件 - 这只是您的一个问题（尽管是最重的问题）。

由于您很好地将您的需求放入有序列表中，很明显您需要绑定到三个事件：单击按钮，对焦并在输入字段上模糊。这是一个很好的指示，你必须实现以下功能（不需要使用$ .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 : '输入宝贝名称',
  ...
};

根据任何输入字段的id，您可以轻松获取给定的默认值领域。上面提到的三个函数应该是这样的：

$('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'
    });
  }
});

代码未经测试但应指向正确的方向。仍然有很大的改进空间，比如不用乱码乱丢全局命名空间，但这可能是你需要采取的第一步。

Answer 2

将您的扩展方法更改为此

$.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/

的完整工作演示

jquery绑定事件

2 个答案: