Question

我正在使用jQuery作为员工管理表单。此代码有效，但它是重复的。有一个更好的方法吗？我没有很多jQuery的经验，所以我很欣赏你的任何指针。选择器引用HTML中的输入。

$('#fname').blur(function(){    
var key = "name_first";
var value = $(this).val();
if ( value != _fname ){
    changeemp(key, value);
    _fname = value;
}
});
$('#lname').blur(function(){        
var key = "name_last";
var value = $(this).val();
if ( value != _lname ){
    changeemp(key, value);
    _lname = value;
}           
});
$('#initials').blur(function(){     
var key = "initials";
var value = $(this).val();
if ( value != _initials ){
    changeemp(key, value);
    _initials = value;
}               
});             
$('#email').blur(function(){        
var key = "email";
var value = $(this).val();
if ( value != _email ){
    changeemp(key, value);
    _email = value;
}               
});

HTML：

<label for="fname"><span>First Name</span></label><br/>
<input type="text" id="fname" class="inputdata"><br/><br/>

<label for="lname">Last Name</label><br/>
<input type="text" id="lname" class="inputdata"><br/><br/>

<label for="initials">Displayed Initials</label><br/>
<input type="text" id="initials" class="inputdata"><br/><br/>

<label for="email">Email Address</label><br/>
<input type="email" id="email" class="inputdata"><br/><br/>

Answer 1

方法是：

var blurInfos = [
{ id: '#fname', key: 'name_first', varName: '_fname'},
{ id: '#lname', key: 'name_last', varName: '_lname'},
{ id: '#initials', key: 'initials', varName: '_initials'}
];

var varContext = window;

var handleBlur = function (blurInfo) {
    $(blurInfo.id).blur(function(){    
        var key = blurInfo.key;
        var value = $(this).val();
        if ( value != varContext[blurInfo.varName] ){
            changeemp(key, value);
            varContext[blurInfo.varName] = value;
        }
    });
};

for (var i = 0; i < blurInfos.length; i++) {
    var blurInfo = blurInfos[i];
    handleBlur(blurInfo);
};

备注

代码假定变量_fname，_lname等位于全局上下文中（window）。否则，必须相应地修改代码。

修改

更新了答案，因为在function循环中定义for被认为是不好的做法

Answer 2

将键设置为html元素的属性，或使用id匹配来自对象的值，格式为 {{sId}：{sValue}，{sId}：{sValue}}。它会变成这样的东西：

$('.inputdata').change(function()
{
   // this method should handle comparing and setting
   TryChangeEmp(this.id, this.value);
});

TryChangeEmp = function(sId, sVal)
{
   // where defaultValues is your default values in keyValue pair { sId : sValue }
   if (defaultValues[sId] != sVal) 
   {
      defaultValues[sId] = sVal; 
      /* whatever other processing */
   }
}

我也改为使用更改事件，因为这似乎更符合您的标准

jQuery事件模糊功能 - 如何干涸？

2 个答案:

备注

修改