Quiero cambiar el color de un input
de la siguiente manera:
- cuando valga 1 se debe dibujar en verde.
- cuando valga F se debe dibujar en rojo.
Hasta ahora sólo lo hace una vez pero lo debería hacer cuantas veces los cambie.
$(document).ready(function() {
$('table :input').blur(function(){
var $input = $(this);
if($input.val() === 'F'){
$input.addClass('rojo');
} else {
$input.addClass('verde');
}
});
});
.rojo {
background: red;
}
.verde {
background: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<table class="tabla">
<tr bgcolor="#085584ff">
<th width="100">Placa</th>
<th><input type="text" value="F"></th>
<th><input type="text" value="1"></th>
</tr>
</table>
</body>
</html>
No se cómo hacer esto, si alguien me puede ayudar lo agradecería mucho, además lo logro en el evento blur
y la idea es cuando cambie el input
.