javascript - 提交表单跨度消息更改位置为什么？

Question

我试图理解为什么每次字段变空时 jquery 生成的消息都会改变位置!

因此，如果消息是由 ajax 的反馈生成的，那么它会被放置在登录框正下方的适当位置。如果字段(输入框)在提交时为空，则不会调用 ajax 脚本，并且它会显示空字段的消息，但在下方 40px 或更多处显示。

jquery 脚本:

<script type="text/javascript">
                        <!--
                        $(document).ready(function(){
                            $("#loginform").submit(function(){

                                $('#loginform input[type=text]').each(function(n,element){  
                                    if ($(element).val()=='') {
                                        $(".message").html('<p>O campo '+element.id+' tem de ter um valor!</p>').fadeIn("slow").delay(2000).fadeOut(1000);
                                        return false;  
                                    } 

                                    else{
                                        $.post("login.php", { usrname:$("#Nome").val(), passwd:$("#Palavra-passe").val()}, function(data){
                                            if(data == '1'){
                                                $("#subLog").hide();
                                                $(".message").html('<p>Login efectuado com sucesso, a redirecionar...</p>').fadeIn("slow").delay(2000).fadeOut(1000, function (){
                                                    $("#login").fadeOut('slow', function(){
                                                        location.reload();
                                                    });
                                                });
                                            }
                                            else{
                                                $("#subLog").hide();
                                                $(".message").html('<p>Erro! Tente novamente por-favor!</p>').fadeIn("slow").delay(1500).fadeOut(1000, function(){
                                                    $("#subLog").fadeIn('fast');
                                                });
                                            }
                                        });
                                    }
                                });
                                return false;
                            });
                        });
                        //-->
                        </script>

css 消息样式:

.message{
    text-align:center;
    color: white;
    background: rgba(0, 0, 0, .5);
    margin-top: 65px;
    padding: 4px;
    font-weight: bold;
    font-size: small;
    border: 2px solid white;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
}

形式:

<div class="box" id="login" style="width: 326px; height: 228px; top: 39%; background-image: url('images/loginBox.png');background-repeat: no-repeat;">

<form id="loginform" action="" method="post">

    <fieldset style="display: block">
        <legend></legend>
            <input id="Nome" class="transparent" type="text">
        <input id="Palavra-passe" class="transparent" type="password"> 
        <input id="subLog" type="submit" value="Login">
    </fieldset>

</form>

<div class="message"></div>

更新:

当调用 ajax 指令时，提交按钮被隐藏，因此位置改变了 65px。为了纠正这个小问题，我从 css 规则中删除了 margin-top 属性，并使用 .css('margin-top', 'value') 更改了位置。通过这种方式，我将值更改为不同的消息，并且都显示在相同的屏幕位置。谢谢。

Answer 1

好吧，我不知道它在 ajax 响应后的具体表现如何，但是如果您将该字段留空，您只需要从 css 中删除这一行

margin-top: 65px;

没关系。

看这里:http://jsfiddle.net/Ature/2/

附言我也补充了

$('div.message').hide();  

避免在生成任何警告之前显示 div 消息

编辑 - 也许您有其他影响您的 div 的规则。如果在插入之前加载了其他规则，则可以添加行

margin-top: 0px;

覆盖它们。

此外:记得在重新加载 yopur 页面时清除缓存!