Question

<HTML>
<HEAD>
    <title>Login</title>
    <script type="text/javascript" src="http://script.auction.co.kr/common/jquery.js"></script>     
    <script type="text/javascript">             
    $(document).ready(function() {
        $(":input[name='txtPassword']").blur(function(e){
            $(this).css("background-color","white");
        });
        $(":input[name='txtPassword']").focus(function(e){
            $(this).css("background-color","#FDFCDC");
        });
        $(":input[name='txtID']").blur(function(e){
            $(this).css("background-color","white");
        });
        $(":input[name='txtID']").focus(function(e){
            $(this).css("background-color","#FDFCDC");
        });


    });
    </script>
</HEAD>
<body>
    <form id="Form1" method="post" runat="server">
        <div id="body">     
            <input type="text" id="txtID" name="txtID" CssClass="txt" Width="130px" tabIndex="1"></input>
            <input type="password" id="txtPassword" name="txtPassword" Width="130px" TextMode="Password" tabIndex="2"></input>
        </div>
    </form>
</body>

这是我写的代码。

在这段代码中，我感到非常不舒服，那是因为

两个TextBox几乎相同。

但我无法缩短此代码..

我认为必须有最佳代码。

我知道下面的代码工作原理相同。但我希望附加控件名称或ID。轻松阅读代码

        $(":input").blur(function(e){
            $(this).css("background-color","white");
        });
        $(":input").focus(function(e){
            $(this).css("background-color","#FDFCDC");
        });

Answer 1

像这样：

    $("#txtID, #txtPassword").focus(function(e){
        $(this).css("background-color","#FDFCDC");
    }).blur(function(e){
        $(this).css("background-color","white");
    });

或者，更好的是：

<style type="text/css">
    #txtID, #txtPassword {
        background-color: white;
    }
    #txtID:active, #txtPassword:active {
        background-color: #FDFCDC;
    }
</style>

如何使这个代码简短＆amp;最佳

1 个答案: