Question

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

如果登录成功，此textarea的背景应更改为带有黑色字体的绿色并显示消息。

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

默认情况下，此textarea是隐藏的。

请注意，如果找到用户/密码，我将从服务器收到回调，但这将在稍后实施。因此，我只想在单击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!"
      }

 });

});

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

非常感谢！

Answer 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;
}

Answer 2

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

Answer 3

if(success == false) {
      $('#message').css("background-color","red");
      $('#message').css("color","white");
      $('#message').text('whatever text you want');
      $('#message').show();
}
else {
     $('#message').hide();
}

jquery mobile：按下提交按钮后更改textarea背景

3 个答案: