$.post 上的 jQuery addClass答案

【问题标题】：jQuery addClass on $.post$.post 上的 jQuery addClass
【发布时间】：2010-03-18 07:59:14
【问题描述】：

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

这里的 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";
  }
 }

【问题讨论】：

您是否遇到任何类型的 JavaScript 错误或类更改没有发生？
你现在到底有什么问题？
是的，请澄清问题。 “一切都很好”……那怎么了？
使用 Firebug for Firefox 检查哪些数据准确来自您的服务器。

标签： php jquery jquery-selectors jquery-validate addclass

【解决方案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;');
  }

让我知道它是否有效。

【讨论】：

【解决方案2】：

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

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

一定是查资料的事吧？但我不明白怎么...

【讨论】：

谢谢 - 我意识到这一点，但我直到 2 秒前才拥有帐户，并且在发布后更换了计算机.. :)
这意味着数据中包含一个否。您可以通过放置一个 javascript 警报来检查并查看正在执行的循环。

【解决方案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>

【讨论】：