使用jQuery的.live/.bind來影響由for循環創建的輸入

Question

我有兩個數組，一個輸入名稱，一個輸入數值。有7個輸入，所以我做了一個循環，用它的值填充每個輸入，然後使它在輸入被聚焦時使文本消失，如果沒有輸入，則恢復原始值文本。這可能通過與jQuery循環做到嗎？在我看來，.live和.bind不適用於此目的。我將不得不在每個輸入事件重點&模糊事件硬核？

for (var i=0;i<7;i++) { 

    $('#user_' + input_names[i]).attr('value', default_values[i]); 

    $('#user_' + input_names[i]).live("blur", function(){ 
     if(this.value == '')this.value=default_values[i]; 
    }); 

    $('#user_' + input_names[i]).live("focus", function(){ 
     if(this.value == default_values[i])this.value=''; 
    }); 

} 

---

更新這裏，釋放陣列埃裏克要求：

var input_names = ['username', 'password']; 
var default_values = ['Username', 'Password']; 

for (var i=0;i<2;i++) {  
    $('#user_' + input_names[i]).attr('value', default_values[i]); 

    $('#user_' + input_names[i]).blur(function(){ 
     if(this.value == '')this.value=default_values[i]; 
    }); 

    $('#user_' + input_names[i]).focus(function(){ 
     if(this.value == default_values[i])this.value=''; 
    }); 
} 

Answer 1

看起來你正在尋找的HTML5 placeholder屬性。如果你想向後兼容性，there's a jQuery plugin for that

<input id="user_username" placeholder="Username" /> 
<input id="user_password" placeholder="Password" /> 

：你的HTML只是改變了這一點。隨着插件引用，只是這樣做：

$('input[placeholder]').placeholder(); 

---

至於什麼地方錯了你最初的代碼，我懷疑有一個封閉的問題，i被保留的7價值你會做的更好重寫它是這樣的：

var inputDefaults = {username: 'Username', password: 'Password'}; 

$.each(inputDefaults, function(field, defaultValue) { 
    $('#user_' + field) 
     .attr('value', defaultValue); 
     .blur(function() { 
      if($(this).val() == '') 
       $(this).val(defaultValue); 
     }) 
     .focus(function(){ 
      if($(this).val() == defaultValue) 
       $(this).val(''); 
     }); 
});