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

因此，当fill.length为＆gt; 0且<= 4时，字段是必需的，我希望输入边框为红色。

但是当fill.length＆lt; 1（= 0）时，我希望所有边框都是绿色。

问题是，如果我在输入上写一些内容然后将其全部删除，他们应该参观绿色，但Part2会覆盖Part1，它们会显示为红色。

我的问题是：
- 我该如何解决？
- 这个问题来自哪里？（jquery theory）

我越接近“正确”代码就用第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/。代码并不完全相同，但重点是相同的。当该字段为空时，它应显示“没有写入”，但它没有。

Answer 1

下面是你可以做什么的样本

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

Answer 2

使用vanilla JavaScript这样的东西可以运行，并且运行速度更快，有很多字段。

http://jsfiddle.net/TzqPT/

Answer 3

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

检查一下 http://jsfiddle.net/GgzC5/

jQuery覆盖功能

3 个答案: