Question

我有2个文本框，1个选择和1个文件。

如果它们是空的，我怎么能用jquery来改变它们的背景颜色。

我想用for循环检查所有这些。

<input type="text">
<input type="text">

<select>
    <option></option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

<input type="file">

Answer 1

这应该有所帮助：https://jsfiddle.net/4v8urh7k/1/

// check if the element is empty or not
function checkEmpty(elem){
  if(elem.val() === ''){
    elem.addClass('empty');
  } else {
    elem.removeClass('empty');
  }
}

// listen for when the input/select change
$('input, select').on('change keyup',function(){
  checkEmpty($(this));
});

// loop through the elements when the page loads
$('input, select').each(function(){
  checkEmpty($(this));
});

Answer 2

我认为它是创建一个命名函数并在initital页面上调用该函数，然后在输入信息时再次调用该函数。请注意，我刚刚将direclty的函数添加到了元素中 - 添加/删除了一个类（'invalid'）到输入。切换类比直接影响单个元素的CSS总是更好。另请注意，我在其中一个输入中添加了测试值以演示初始状态。

$(document).ready(function(){
checkInput();
  })

$('input, select').on('input change',checkInput)

function checkInput(){
$('input, select').each(function(){
      if($(this).val() == ''){
      $(this).addClass('invalid')}else{  
        $(this).removeClass('invalid')}
  })
}

.invalid{background:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="test">
<input type="text">

<select>
    <option></option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

<input type="file">

如果元素为空，则使用jquery更改背景颜色

2 个答案: