js函数一个调用时,没问题;多个调用时,就出现问题,求解!

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="java.util.*,java.text.*" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>regist</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
/**js写的方法**/
function control(inputId,note,rightImage,wrongImage,isSpace){
$(isSpace).css("display","none");
$(note).css("display","inline-block");
$(rightImage).css("display","none");
$(wrongImage).css("display","none");
$(inputId).blur(function(){
if($(inputId).val()!=""){
$(isSpace).css("display","none");
$(note).css("display","none");
$(rightImage).css("display","inline-block");
$(wrongImage).css("display","none");
}else{
$(wrongImg).css("display","inline-block");
$(isSpace).css("display","inline-block");
$(note).css("display","none");
$(rightImage).css("display","none");
}
});
}
/**方法调用**/
$(function(){
control("#username",
"table tr:eq(0) td:eq(2) span:eq(1)",
"table tr:eq(0) td:eq(2) img:eq(1)",
"table tr:eq(0) td:eq(2) img:eq(0)",
"table tr:eq(0) td:eq(2) span:eq(0)");
control("#pwd",
"table tr:eq(1) td:eq(2) span:eq(1)",
"table tr:eq(1) td:eq(2) img:eq(1)",
"table tr:eq(1) td:eq(2) img:eq(0)",
"table tr:eq(1) td:eq(2) span:eq(0)");
control("#phone",
"table tr:eq(3) td:eq(2) span:eq(1)",
"table tr:eq(3) td:eq(2) img:eq(1)",
"table tr:eq(3) td:eq(2) img:eq(0)",
"table tr:eq(3) td:eq(2) span:eq(0)");
});
</script>
  </head>
  
  <body>
   <div id="wrap">
<div id="top_content">
<div id="header">
<div id="rightheader">
<p>
<% 
Date date = new Date(); 
SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM/dd"); 
out.println(sdf.format(date)); 
 %>
<br />
</p>
</div>
<div id="topheader">
<h1 id="title">
<a href="#">regist</a>
</h1>
</div>
<div id="navigation">
</div>
</div>
<div id="content">
<p id="whereami">
</p>
<h1>
注册
</h1>
<form action="regist.do" method="post">
<table cellpadding="0" cellspacing="0" border="0"
class="form_table">
<tr>
<td valign="middle" align="right">
用户名:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="username" id="username" />
</td>
<td valign="middle" align="left">
<img id="wrongImg" alt="wrong" src="img/wrong.png"/>
<span id="isSpace">不许为空</span>
<span id="note">请输入用户名[1-20]字符</span>
<img id="rightImg" alt="right" src="img/right.png">
</td>
</tr>
<tr>
<td valign="middle" align="right">
密码:
</td>
<td valign="middle" align="left">
<input type="password" class="inputgri" name="pwd" id="pwd" />
</td>
<td valign="middle" align="left">
<img id="wrongImg" alt="wrong1" src="img/wrong.png"/>
<span id="isSpace">不许为空</span>
<span id="note">请输入密码[0-6]个字符</span>
<img id="rightImg" alt="right" src="img/right.png">
</td>
</tr>
<tr>
<td valign="middle" align="right">
确认密码:
</td>
<td valign="middle" align="left">
<input type="password" class="inputgri" name="repwd" />
</td>
<td valign="middle" align="left">
<span>再次输入密码</span>
</td>
</tr>
<tr>
<td valign="middle" align="right">
手机号:
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="phone" id="phone" />
</td>
<td valign="middle" align="left">
<img id="wrongImg" alt="wrong2" src="img/wrong.png"/>
<span id="isSpace">不许为空</span>
<span id="note">请输入11位手机号</span>
<img id="rightImg" alt="right" src="img/right.png">
</td>
</tr>

<!--  
<tr>
<td valign="middle" align="right">
性别:
</td>
<td valign="middle" align="left">
男
<input type="radio" class="inputgri" name="sex" value="m" checked="checked"/>
女
<input type="radio" class="inputgri" name="sex" value="f"/>
</td>
</tr>
-->

<!--  
<tr>
<td valign="middle" align="right">
验证码:
<img id="num" src="image" />
<a href="javascript:;" onclick="document.getElementById('num').src = 'image?'+(new Date()).getTime()">换一张</a>
</td>
<td valign="middle" align="left">
<input type="text" class="inputgri" name="number" />
</td>
</tr>
-->
</table>
<p>
<input type="submit" class="button" value="Submit &raquo;" />
</p>
</form>
</div>
</div>
<div id="footer">
<div id="footer_bg">
[email protected]
</div>
</div>
</div>
  </body>
</html>
JavaScript

解决方案 »

  1.   

    建议FireBug调试一下三个control方法，每执行完一个control方法看UI上有什么变化。单单看js代码很难看出问题的。
      

  2.   

    LZ是不是多个调用的时候，只有username起作用了
      

  3.   

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%@page import="java.util.*,java.text.*" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>regist</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
           /**js写成这样就没问题了,但看起来很繁琐,之前想写个函数调用,但看起来没那么容易好实现**/
    <script type="text/javascript">
    $(function(){
    $("#username").blur(function(){
    $("table tr:eq(0) td:eq(2) span:eq(0)").css("display","none");
    $("table tr:eq(0) td:eq(2) span:eq(1)").css("display","inline-block");
    $("table tr:eq(0) td:eq(2) img:eq(1)").css("display","none");
    $("table tr:eq(0) td:eq(2) img:eq(0)").css("display","none");
    if($("#username").val()!=""){
    $("table tr:eq(0) td:eq(2) span:eq(0)").css("display","none");
    $("table tr:eq(0) td:eq(2) span:eq(1)").css("display","none");
    $("table tr:eq(0) td:eq(2) img:eq(1)").css("display","inline-block");
    $("table tr:eq(0) td:eq(2) img:eq(0)").css("display","none");
    }else{
    $("table tr:eq(0) td:eq(2) img:eq(0)").css("display","inline-block");
    $("table tr:eq(0) td:eq(2) span:eq(0)").css("display","inline-block");
    $("table tr:eq(0) td:eq(2) span:eq(1)").css("display","none");
    $("table tr:eq(0) td:eq(2) img:eq(1)").css("display","none");
    }
    });

    $("#pwd").blur(function(){
    $("table tr:eq(1) td:eq(2) span:eq(0)").css("display","none");
    $("table tr:eq(1) td:eq(2) span:eq(1)").css("display","inline-block");
    $("table tr:eq(1) td:eq(2) img:eq(1)").css("display","none");
    $("table tr:eq(1) td:eq(2) img:eq(0)").css("display","none");
    if($("#pwd").val()!=""){
    $("table tr:eq(1) td:eq(2) span:eq(0)").css("display","none");
    $("table tr:eq(1) td:eq(2) span:eq(1)").css("display","none");
    $("table tr:eq(1) td:eq(2) img:eq(1)").css("display","inline-block");
    $("table tr:eq(1) td:eq(2) img:eq(0)").css("display","none");
    }else{
    $("table tr:eq(1) td:eq(2) img:eq(0)").css("display","inline-block");
    $("table tr:eq(1) td:eq(2) span:eq(0)").css("display","inline-block");
    $("table tr:eq(1) td:eq(2) span:eq(1)").css("display","none");
    $("table tr:eq(1) td:eq(2) img:eq(1)").css("display","none");
    }
    });

    $("#phone").blur(function(){
    $("table tr:eq(3) td:eq(2) span:eq(0)").css("display","none");
    $("table tr:eq(3) td:eq(2) span:eq(1)").css("display","inline-block");
    $("table tr:eq(3) td:eq(2) img:eq(1)").css("display","none");
    $("table tr:eq(3) td:eq(2) img:eq(0)").css("display","none");
    if($("#phone").val()!=""){
    $("table tr:eq(3) td:eq(2) span:eq(0)").css("display","none");
    $("table tr:eq(3) td:eq(2) span:eq(1)").css("display","none");
    $("table tr:eq(3) td:eq(2) img:eq(1)").css("display","inline-block");
    $("table tr:eq(3) td:eq(2) img:eq(0)").css("display","none");
    }else{
    $("table tr:eq(3) td:eq(2) img:eq(0)").css("display","inline-block");
    $("table tr:eq(3) td:eq(2) span:eq(0)").css("display","inline-block");
    $("table tr:eq(3) td:eq(2) span:eq(1)").css("display","none");
    $("table tr:eq(3) td:eq(2) img:eq(1)").css("display","none");
    }
    });

    });

    </script>
      </head>
      
      <body>
       <div id="wrap">
    <div id="top_content">
    <div id="header">
    <div id="rightheader">
    <p>
    <% 
    Date date = new Date(); 
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM/dd"); 
    out.println(sdf.format(date)); 
     %>
    <br />
    </p>
    </div>
    <div id="topheader">
    <h1 id="title">
    <a href="#">regist</a>
    </h1>
    </div>
    <div id="navigation">
    </div>
    </div>
    <div id="content">
    <p id="whereami">
    </p>
    <h1>
    注册
    </h1>
    <form action="regist.do" method="post">
    <table cellpadding="0" cellspacing="0" border="0"
    class="form_table">
    <tr>
    <td valign="middle" align="right">
    用户名:
    </td>
    <td valign="middle" align="left">
    <input type="text" class="inputgri" name="username" id="username" />
    </td>
    <td valign="middle" align="left">
    <img alt="wrong" src="img/wrong.png" style="display:none"/>
    <span style="display:none">请重新输入</span>
    <span>请输入用户名[1-20]字符</span>
    <img alt="right" src="img/right.png" style="display:none"/>
    </td>
    </tr>
    <tr>
    <td valign="middle" align="right">
    密码:
    </td>
    <td valign="middle" align="left">
    <input type="password" class="inputgri" name="pwd" id="pwd" />
    </td>
    <td valign="middle" align="left">
    <img alt="wrong1" src="img/wrong1.png" style="display:none"/>
    <span style="display:none">请重新输入</span>
    <span>请输入密码[0-6]个字符</span>
    <img alt="right" src="img/right.png" style="display:none"/>
    </td>
    </tr>
    <tr>
    <td valign="middle" align="right">
    确认密码:
    </td>
    <td valign="middle" align="left">
    <input type="password" class="inputgri" name="repwd" />
    </td>
    <td valign="middle" align="left">
    <span>再次输入密码</span>
    </td>
    </tr>
    <tr>
    <td valign="middle" align="right">
    手机号:
    </td>
    <td valign="middle" align="left">
    <input type="text" class="inputgri" name="phone" id="phone" />
    </td>
    <td valign="middle" align="left">
    <img alt="wrong2" src="img/wrong2.png" style="display:none"/>
    <span style="display:none">请重新输入</span>
    <span>请输入11位手机号</span>
    <img alt="right" src="img/right.png" style="display:none"/>
    </td>
    </tr>

    <!--  
    <tr>
    <td valign="middle" align="right">
    性别:
    </td>
    <td valign="middle" align="left">
    男
    <input type="radio" class="inputgri" name="sex" value="m" checked="checked"/>
    女
    <input type="radio" class="inputgri" name="sex" value="f"/>
    </td>
    </tr>
    -->

    <!--  
    <tr>
    <td valign="middle" align="right">
    验证码:
    <img id="num" src="image" />
    <a href="javascript:;" onclick="document.getElementById('num').src = 'image?'+(new Date()).getTime()">换一张</a>
    </td>
    <td valign="middle" align="left">
    <input type="text" class="inputgri" name="number" />
    </td>
    </tr>
    -->
    </table>
    <p>
    <input type="submit" class="button" value="Submit &raquo;" />
    </p>
    </form>
    </div>
    </div>
    <div id="footer">
    <div id="footer_bg">
    [email protected]
    </div>
    </div>
    </div>
      </body>
    </html>