具有多个文本输入的干式javascript

我有大约20个表单文本输入。对于其中的每一个，我希望确保它们存在，并对它们应用相同的逻辑，如下所示：

var title = $('#title')
if (title == '') {
     title.css({
       'background-color': 'rgba(230, 89, 78, 0.07)',
    }); 
};

<input type="text" id="title" />

var title=$（“#title”）
如果（标题=“”）{
title.css({
“背景色”：“rgba（230,89,78,0.07）”，
}); 
};

我将如何“批量”应用此内容，而不是为我的每个文本输入重新编写此内容？理想情况下，我希望有一个变量列表，其中包含我需要执行此操作的所有字段：

['title'，'company'，'copyright'，…]

$（“#title”）。css（）将枚举每个元素，但每个页面上的id都是唯一的。我建议添加一个类“title”并改为按$（“.title”）.css（）查询

$（“.title”）每个（函数（）{
if（！$（this.val（））{
$（this.css）({
“背景色”：“rgba（230,89,78,0.07）”，
}); 
}
});

您可以给他们一个公共类（如

验证

），然后使用

。each（）

：

从这里开始，使用CSS应用样式

<input id="title1" class="title" />
<input id="title2" class="title" />
<input id="title3" class="title" />

<script type="javascript">
  $(".title")each(function(){
      if(!$(this).val()){
        $(this).css({
          'background-color': 'rgba(230, 89, 78, 0.07)',
        }); 
      }
  });
</script>

$('.validate').each(function() {
    var $this = $(this);

    if (!$this.val()) {
        $this.removeClass('valid');
        $this.addClass('invalid');
    } else {
        $this.removeClass('invalid');
        $this.addClass('valid');
    }
});