0

私は別のjQueryの問題で戻ってきました。これが私がやろうとしていることです。テキストフィールドがあり、ユーザーが何も入力しない場合は背景を赤に、入力した場合は背景を緑に変えたいと考えています。どちらのチェックも「blur」で発生し、「。animate（）」を使用しています。背景色を変更します。（色をアニメーション化するためのjQuery-Colorがあります）。これが私のスクリプトです：

<head>
    <script type="text/javascript" src="assets/javascript/jQuery.js"></script>
    <script type="text/javascript" src="assets/javascript/jQuery-color.js"></script>
    <script>
    var jQ=jQuery.noConflict();

    var fullNameValue=jQ(".fullName").attr("value");

    jQ(document).ready(function(){
        jQ(".fullName").blur(function(){
            if(fullNameValue==null || fullNameValue==""){
                jQ(".fullName").animate({
                    backgroundColor: "#AF383C",
                    color: "#FFFFFF"
                });
            }
            else{
                jQ(".fullName").animate({
                    backgroundColor: "#78BB6C",
                    color: "#000000"
                });
            }
        });
    });
    </script>
</head>

現在、ぼかしの際、テキストフィールドに何かが入力されていても、テキストフィールドが赤に変わります。これは、おそらく私のifステートメントに何か問題があることを意味します。

4

2 に答える 2

4

「fullNameValue」変数は、<input>フィールド自体がまだDOMにないときに確立されます。そのステートメントは、「blur」ハンドラー内にある必要があります。

jQ(document).ready(function(){
    jQ(".fullName").blur(function(){
        var fullNameValue=jQ(".fullName").attr("value");
        if(fullNameValue==null || fullNameValue==""){
            jQ(".fullName").animate({
                backgroundColor: "#AF383C",
                color: "#FFFFFF"
            });
        }
        else{
            jQ(".fullName").animate({
                backgroundColor: "#78BB6C",
                color: "#000000"
            });
        }
    });
});

あなたがしていることは、「ぼやけ」が実際に起こったときに値をチェックする場合にのみ意味があります。

さらに明確にするために：

var fullNameValue=jQ(".fullName").attr("value");

そのステートメントは、「fullNameValue」をフィールドの値に設定します。後で値が変更された場合、変数は更新されません。ステートメントが実行されたときの値のコピーのままです。

最後に.val()、フォームフィールドの値を取得するために使用することをお勧めします。

var fullNameValue = jQ(".fullName").val();
于 2012-04-29T12:28:39.213 に答える
1 
function inputBorder() {
    var i = $('input[type="text"]');

    i.blur(function() {
        i.removeClass('red green');
        if(i.val() == "") {
            i.addClass('red');   
        } else {
            i.addClass('green');                
        }

    });
}

$(document).ready(function() {
    inputBorder();        
});

ここでフィドル！

于 2012-04-29T12:49:56.213 に答える