更改类所选空输入的CSS属性

Change CSS attribute of empty inputs selected by class

本文关键字：输入 CSS 属性      更新时间：2023-09-26

我这里缺少一些东西。这似乎是个简单的问题。我有这个：

<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不是一个元素。为什么会发生这种情况？

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

使用

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

你可以使用.each（）

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

示例

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

我会这样做：

$('#submit').click(function() {
    $('.form-control').each(function() {
        if ($(this).val() === "" ) {
            $(this).css("background","#FFB6B5");
        } else {
            $(this).css("background","#FFF");
        } 
    });
});
相关文章：