Question

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

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

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

我如何批量应用这个'而不是为每个文本输入重写这个？理想情况下，我希望有一个变量列表，其中包含我需要执行此操作的所有字段：['title', 'company', 'copyright', ...]。

Answer 1

您可以为他们提供一个公共课程（例如validate），然后使用.each()：

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

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

从那里开始，使用CSS应用样式。

Answer 2

$（“＃title”）。css（）将枚举每个元素，但是，id在每个页面上都是唯一的。我建议添加一个类'title'并通过$（“。title”）。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>

带有多个文本输入的DRY javascript

2 个答案: