Question

我在这里遗漏了一些东西。似乎是一个简单的问题。我有这个：

<form>
  <input type="text" name="name" id="name" class="form-control" placeholder="Name" required />
  <input type="text" name="address" id="address" class="form-control" placeholder="Address" required />
  ...
</form>

我想让这个功能起作用：

$('#submit').click(function() {

    var fields = $('.form-control');
    _.each(fields, function(field) {
        if( field.value == "" ) {
            field.css("background","#FFB6B5");
        }
    });

});

我得到了undefined is not a function：

field.css("background","#FFB6B5");

就像field不是元素一样。为什么会这样？

Answer 1

根据您的代码field引用底层DOM元素，.css()是jQuery函数。因此，您需要使用jQuery对象。

使用

$(field).css("background","#FFB6B5");

您可以使用.each()

迭代jQuery对象，为每个匹配的元素执行一个函数。

实施例

$('.form-control').each(function( index ) {
    if(this.value == ""){
        $(this).css("background","#FFB6B5");
    }       
});

Answer 2

我会这样做：

$('#submit').click(function() {

    $('.form-control').each(function() {
        if ($(this).val() === "" ) {
            $(this).css("background","#FFB6B5");
        } else {
            $(this).css("background","#FFF");
        } 
    });

});

更改由类选择的空输入的CSS属性

2 个答案: