jQuery将div覆盖在论坛字段

Question

可以说我做了一个大表格。
让形式的一个元素是这样的：

<form> 
... 

<tr> 
<td><div id="username"><input name="username" id="username" type="text"/></div></td> 
</tr> 

... 
</form> 

现在我放在一个div底部是这样的：

<div id="submiter">Submit</div> 

现在我有这个js：

$("#submiter").click(function() { 
    $.post("submiter.php", 
     $("#formmain").serialize(), 
     function(data) { 
     $.each(data,function(){ 
      id=thisid; 
      error=this.error; 
      //want some code here to over lay div with the id got with this.id 
     }) },'json') 
}); 

现在php以这种格式返回json

[{id:formelementid,error:The error}]

问题： 如何覆盖完全一个div errors类与它的错误，为简单起见，在div是#username？ 的演示将是非常好的

Answer 1

这是一个CSS问题：

.errors { 
    position:absolute; 
    z-index:2; /* Or higher than parent div */ 
    width:100%; 
    height:100%; 
    background-color:#FFF; /* Whatever */ 
} 

如果要追加该div使用jQuery，使用append^[docs]：

$('<div class="errors"/>').appendTo('#my_form'); 

在您的例子，它会像这样工作：

$("#submiter").click(function() { 
    $.post("submiter.php", 
     $("#formmain").serialize(), 
     function(data) { 
      var errors = ''; 
      $.each(data,function(){ 
       id=thisid; 
       error=this.error; 
       errors += error + '<br />'; 
      }); 
      $('<div class="errors"/>').appendTo('#my_form').html(errors); 
     },'json') 
}); 

为了使覆盖消失，当用户想要它，只需应用点击处理程序：

$('.errors').live('click',function(){ 
    $(this).remove(); 
});