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 个文本输入是可选的，但如果用户在其中一个字段中输入，他必须将它们全部输入。

因此，当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

这是您可以执行的操作的示例

$('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/