2

我想更改显示“登录成功！”的文本区域。或“登录失败！” 在按下 HTML 表单的登录按钮后。按下登录按钮时，文本区域应淡入。

如果登录成功，这个文本区域的背景应该变成黑色字体的绿色并显示消息。

如果不成功，应该将文本区域更改为带有白色字体的红色并显示错误消息（带有错误处理程序）。

默认情况下，此文本区域是隐藏的。

请注意，无论是否找到用户/密码，我都会收到来自服务器的回调，但这将在稍后实现。因此，我只想在单击 login_submit 按钮时发送一个随机的“true”或“false”。

这是我的 HTML 代码：

<div data-role="content">

<form method="POST" data-ajax="false">
<label for="login_username">Username:</label>
<input type="text" name="login_username" id="login_username"/><br>

<label for="login_password">Passwort:</label>
<input type="password" name="login_password" id="login_password"/><br>

<input type="submit" id="login_submit" value="Login" /><br>
<input type="reset" id="login_reset" value="Reset"><br>
</form>

 <textarea id="message" style="color: white; 
 background-color: grey; visibility: hidden"  readonly> Default </textarea>

</div>

这是我的 jquery 移动代码：

$(document).ready(function(){ 

$('#login_submit').click(function(){

     $('message').change(function(success) {

     //How do I receive a variable from the html code?
     //success should be random either true or false
     //success variable is a callback from the server, but is not implemented yet


      if(success == true) {

      //I don´t know what to write in here, it should fade in the text area, 
      //change the background to green with white font and 
      // display the message  "Successful login!"
      } 

      if(success == false) {
      //error handler, 
      //change the background to green with white font and 
      // display the error message (if possible), otherwise "Unsuccessful login!"
      }

 });

});

有人可以告诉我要为代码添加什么吗？

非常感谢！

4

3 回答 3

1

这是我想出的：http: //jsfiddle.net/tymeJV/YL6Da/

我在代码中删除了您的样式属性，并添加了基于失败或成功登录的类。

jQuery

if (success) {
     $("#message").fadeIn("slow").removeAttr("style").addClass("success").text("Successful!");
} else {
     $("#message").fadeIn("slow").removeAttr("style").addClass("error").text("Failed");
}

CSS

.success {
    background-color: green;
    color: white;
}

.error {
    background-color: red;
    color: white;
}
于 2013-05-10T12:58:33.003 回答
0

您可以使用 jQuery .css() 来修改元素 CSS 属性，如下所述：http: //api.jquery.com/css/

于 2013-05-10T12:58:54.613 回答
0 
if(success == false) {
      $('#message').css("background-color","red");
      $('#message').css("color","white");
      $('#message').text('whatever text you want');
      $('#message').show();
}
else {
     $('#message').hide();
}
于 2013-05-10T13:02:14.250 回答