如何指定每个输入

Question

我想在空输入下放一个红底，但不是所有输入， 我需要在这个例子中修复或添加什么来使它工作，

$(function() {
  $('#submit').on('click', function() {
    var myTitle = $('#title').val(),
      myLocation = $('#location').val(),
      myDescription = $('#description').val(),
      myTime = $('#time').val();
    if (myTitle == '' || myDescription == '' || myLocation == '' || myTime == '') {
      $('#title, #location, #description, #time').css('border-color', 'red');

      return false;

    }
  });
});

input {
  border: none;
  padding: 4px 0;
  background: 0 0;
  text-align: left;
  outline: none;
  display: block;
  width: 100%;
  border-bottom: 1px solid #ccc
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='title' placeholder='Add title'>
<input type='text' id='location' placeholder='Add location'>
<input type='text' id='description' placeholder='Add description'>
<input type='time' id='time'>
<button id='submit'>submit</button>

Answer 1

只需在输入上使用每个函数并检查是否为impty：

$(function() {
    $('#submit').on('click', function() {
        $("input").each(function() {
            if ($(this).val() == "") {
                $(this).css('border-color', 'red');
            }
            else $(this).css('border-color', 'green');
        });
       return false;
    });
});

input {
  border: none;
  padding: 4px 0;
  background: 0 0;
  text-align: left;
  outline: none;
  display: block;
  width: 100%;
  border-bottom: 1px solid #ccc
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='title' placeholder='Add title'>
<input type='text' id='location' placeholder='Add location'>
<input type='text' id='description' placeholder='Add description'>
<input type='time' id='time'>
<button id='submit'>submit</button>