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/

P.S。我还添加了

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

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

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

margin-top: 0px;

覆盖它们。

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

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

1 个答案: