jquery - jQuery上書き機能

Question

だから、最初のコード：

$("input").on("keyup", function() {
    var filled = $("input").filter(function() {
        return this.value.length > 0;
    });

パート1

if (filled.length < 1) {                        
    var test= $('#test').val();
    if (test == ""){
        $('#test').css('border-color',green);
    }
} else { ... }

パート2

if (filled.length > 0 && filled.length <= 4) {                  
    $('#test').keyup(function() {
        var test = $('#test').val();
        if (test=="") {
            $('#test').css('border-color',red);
        }
    }
});

これは、オプションのテキスト入力が 4 つあるフォームからのものですが、そのうちの 1 つにユーザーが入力する場合、すべて入力する必要があります。

したがって、filled.length が >0 かつ <=4 の場合、フィールドは必須であり、たとえば入力境界線を赤くしたい。

しかし、filled.length <1 (=0) の場合、すべての境界線を緑色にしたいと考えています。

問題は、入力に何かを書き込んでからすべて消去すると、緑色に変わるはずなのに、Part2 が Part1 を上書きして赤く表示されることです。

私の質問は次のとおりです。
-どうすれば修正できますか?
-この問題はどこから来たのですか? (jquery理論)

「正しい」コードに近づけるには、パート 1 を次のように置き換えます。

if(filled.length < 1)
{                       
     $('#test').keyup(function()
     {
         var test = $('#test').val();

         if(test=="")
         {
              $('#test').css('border-color',green);
         }
     }

}

しかし、入力が空の場合は、パート 1 を開始してパート 2 を置き換えるために、もう一度消去 (キーアップ) する必要があります。

PS: さらにコードが必要な場合、または問題についての説明が必要な場合は、質問してください =)。

編集
フィドル: http://jsfiddle.net/WzE9k/13/。コードはまったく同じではありませんが、ポイントは同じです。フィールドが空の場合、「何も書き込まれていません」と表示されるはずですが、表示されません。

score 0 · Accepted Answer

複数のアイテムにアクセスしたい場合は、class同じ親内に存在する他の同じ要素を区別できるように、を使用することをお勧めします。

これをチェックしてください http://jsfiddle.net/GgzC5/

score 0 · Accepted Answer

これはあなたができることのサンプルです

$('input').keyup(function() {
    // store how many textboxes are not empty
    var len = $('input').filter(function() {
        return $(this).val().length > 0
    }).length;
    $('input').css('border', function() {
        // if number is less than 4 and greater than zero
        // return red
        // else return green
        return len < 4 && len > 0 ? 'red solid 1px' : 'green solid 1px';
    });
});

http://jsfiddle.net/7mVLu/

テキストの変更に伴うフィドル

http://jsfiddle.net/7mVLu/1/

score 0 · Accepted Answer

バニラ JavaScript を使用したこのようなものは、大量のフィールドで機能し、はるかに高速に実行されます。

http://jsfiddle.net/TzqPT/

jquery - jQuery上書き機能

3 に答える 3

Related

Reference