$.post 上的 jQuery addClass

Question

我基本上是想创建一个小型注册表。如果用户名已被占用，我想添加“红色”类，如果没有则添加“绿色”类。

这里的 PHP 工作正常，并返回“YES”或“NO”来确定是否正常。

CSS：

input {

 border:1px solid #ccc;
}
.red {

 border:1px solid #c00;
}
.green {

 border:1px solid green;
 background:#afdfaf;
}

我使用的 Javascript 是：

 $("#username").change(function() { 

             var value = $("#username").val();

  if(value!= '') {
   $.post("check.php", {
    value: value
   }, function(data){

   $("#test").html(data);

    if(data=='YES') {
     $("#username").removeClass('red').addClass('green');
    } if(data=='NO') {
     $("#username").removeClass('green').addClass('red');
    }
   });
  }  
 });

我也有 document.ready 的东西...一切正常，因为除了最后一部分之外，#test div html 更改为“YES”或“NO”我在其中检查数据的价值。这是PHP：

 $value=$_POST['value'];

 if ($value!="") {
  $sql="select * FROM users WHERE username='".$value."'";
  $query = mysql_query($sql) or die ("Could not match data because ".mysql_error());
  $num_rows = mysql_num_rows($query);

  if ($num_rows > 0) {
   echo "NO";
  } else {
   echo "YES";
  }
 }

Answer 1

试试这个

if(data=='YES') 
  {
     $("#username").attr('style','').attr('style', 'border:1px solid green;background:#afdfaf;');
  } 
else
  {
     $("#username").attr('style','').attr('style', 'border:1px solid #c00;');
  }

让我知道它是否有效。

Answer 2

@Jimmy - 班级变化不会发生。

@Gaurav - 使用您的代码，边框会发生变化，但它始终设置为红色，无论数据是“是”还是“否”。

应该是查数据的事吧？但我不明白如何...

Answer 3

这是我认为您应该如何实现您的功能的基本示例。该代码几乎是不言自明的，但如果有任何不清楚的地方，请随时询问。

<?php
function readArray( $arr, $key, $default ='' ) { return isset($arr[$key]) ? $arr[$key] : $default ; }
function error( $message ){ echo "{ result: false, message: \"$message\" }"; exit; }
function success( $isFound ){ echo "{ result: true, exists: " . ($isFound?'true':'false') . "}" ; exit; }

if( sizeof( $_POST ) ) {
    $value = readArray( $_POST, "value", false ) ;
    if( false === $value ) error( "Empty username" ) ;

    @$db = mysql_connect("localhost","root","") ;
    if( !$db ) error( "Can't connect to database" ) ;

    @$result = mysql_select_db( "mysql" ) ;
    if( !$result ) error( "Can't select database" ) ;

    $query = "SELECT COUNT(User) as count FROM user WHERE User='" . mysql_real_escape_string( $value ) . "'";
    @$result = mysql_query( $query ) ;
    if( !$result ) error( "Can't execute query: " . mysql_error() ) ;

    success( readArray( mysql_fetch_assoc( $result ), "count" ) > 0 ) ;
}
?>
<script src="jquery.js" />
<style><![CDATA[
input {
    border:1px solid #ccc;
}
input.red {
    border:1px solid #c00;
}
input.green {
    border:1px solid #0c0;
}
]]></style>

<script>
$(document).ready(function(){
    var updateStyle = function() {
        var value = $("#username").val() ;
        if( !value ) return ;
        $.post("", {
            value: value
        }, function(data){
            var obj = eval( "(" + data + ")" ) ;
            if( obj.result ) {
                if( obj.exists ) {
                    $("#username").addClass('red');
                    $("#test").html( "User already exists" ) ;
                } else {
                    $("#username").addClass('green');
                    $("#test").html( "Username available" ) ;
                }
            } else {
                $("#test").html( obj.message ) ;
            }
        });
    }

    var timeout ;
    $("#username").keydown(function() {
        $("#test").html("") ;
        $("#username").attr("class", "") ;
        clearTimeout( timeout ) ;
        timeout = setTimeout( updateStyle, 500 ) ;
    });
});
</script>

<input id="username" name="username" value="" />
<div id="test"></div>