ユーザーの入力時に入力のクラスを変更するにはどうすればよいですか？

Question

パスワード確認入力の色をユーザーが入力するときに変更しようとしています。一致する場合は境界線が緑色になり、一致しない場合は赤色になります。ここで

はjQueryのです：

var createPass = $("#createPass").val(); 
var confirmPass = $("#confirmPass").val(); 

$("#confirmPass").keydown(function() { 

    if(confirmPass == createPass && confirmPass != "") { 
     confirmPass.addClass("inputCorrect") 
    } else { 
     confirmPass.addClass("inputIncorect"); 
    } 
}); 

HTML：

<label for="passWord">Create Password</label> 
<input type="password" id="createPass" name="passWord" class="inputBox" placeholder="Minimum 8 characters" required><br> 

<label>Confirm Password</label> 
<input type="password" id="confirmPass" class="inputBox" required> 

とCSS：

input.passCorrect { 
    border: 1px solid #00cc00; 
} 

input.passIncorrect { 
    border: 1px solid #ff0000; 
} 

私も最初、次のjQueryを試してみたが、それは見えました少し長めの仕事：

$("input[id=confirmPass").keyup(function() { 

    if ($("input[id=confirmPass]").val() == $("input[id=createPass]").val()) { 

     ($("input[id=confirmPass]").removeClass("passIncorrect")); 
     ($("input[id=confirmPass]").addClass("passCorrect")); 

    } 

    if ($("input[id=confirmPass]").val() != $("input[id=createPass]").val() && ($("input[id=confirmPass]") != "")) { 

     ($("input[id=confirmPass]").removeClass("passCorrect")); 
     ($("input[id=confirmPass]").addClass("passIncorrect")); 

    } 

}); 

私は.keyup(),.keydown(),.keypress(),.change()を試してみましたが、すべてのクラス、ID、変数の名前が変更されましたが、成功しませんでした。これは別の.jsファイルにあり、私は$(document).ready()の有無にかかわらず試してみましたが動作しません。私は.addClassと.removeClassではなく、.css()を使ってみました。

ご協力いただければ幸いです！ここで

Answer 1

はそれを動作させるだろうという固定Javascriptのである：ここでは

var createPass = $("#createPass"); 
var confirmPass = $("#confirmPass"); 

confirmPass.keydown(function() { 
    // Remove both classes 
    confirmPass.removeClass("passCorrect passIncorrect"); 

    // Add the appropriate class 
    if (confirmPass.val() == createPass.val() && confirmPass.val() != "") { 
     confirmPass.addClass("passCorrect"); 
    } else { 
     confirmPass.addClass("passIncorrect"); 
    } 
}); 

は事前に働いていなかったものです：コードconfirmPass.addClass("inputCorrect")を実行すると

• 、あなたはクラスを追加しました整数値に変換する。
• javascriptでは、クラス 'inputCorrect'と 'inputIncorrect'を追加しましたが、CSSでは 'passCorrect'と 'passIncorrect'というクラスを参照します。
• ユーザーがキーを押すたびにcreatePassとconfirmPassの値を取得する必要があります。そうしないと、最初に宣言した2つの変数には常に2つの入力の初期値が格納されます。
• ユーザーがキーを押すたびに入力クラスを削除する必要があります。そうしないと、両方のクラスが入力に適用されます。