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，错误：错误}]

问题：如何将完全与类errors的div叠加在一起，并将其中的错误简单化为div #username？一个演示非常好

Answer 1

这是一个CSS问题：

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

如果你想用JQuery附加这个div，请使用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();
});

jQuery在论坛字段上覆盖div

1 个答案: