jquery绑定事件

Question

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

当我单击每个按钮时，输入元素的缺陷值发生变化；每次在输入元素中聚焦时，该值被清除；如果没有键入任何内容，则

1. ，默认值被重置，但如果键入一些单词，则单词就是值。

方法'inputWithDefValue‘实现了逻辑2和3，但是逻辑1，当我单击按钮集时，evnet’焦点‘和'blur’是递增绑定的，因此'defVal‘变量是不正确的。如何解决这个问题谢谢。

对于调试，我在focus evnet中使用“警报(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'
                });
            }
        });

    }
});

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);

在 的全工作演示