0

所以,首先是代码:

$("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/。代码不完全相同,但要点是相同的。当该字段为空时,它应该显示“什么都没有写”,但事实并非如此。

4

3 回答 3

0

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

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

于 2012-09-05T15:38:03.473 回答
0

像这样的原生 JavaScript 可以在大量字段中工作并运行得更快。

http://jsfiddle.net/TzqPT/

于 2012-09-05T15:57:12.810 回答
0

如果您想访问多个项目,那么我最好建议使用,class以便您可以区分同一父项中存在的任何其他相同元素。

check this http://jsfiddle.net/GgzC5/

于 2012-09-05T16:01:33.300 回答