0

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.

2 respuestas 2

1

Solo necesitas usar el evento change junto a blur, de este modo:

$(document).ready(function() {
    $('table :input').on('blur change', function(){
       var $input = $(this);
       if($input.val() === 'F'){
          $input.addClass('rojo'); 
          $input.removeClass('verde');
       } else {
          $input.addClass('verde');
          $input.removeClass('rojo');
       }
    });
});
3
  • Aun sigue funcionando igual Commented el 21 dic. 2019 a las 1:36
  • 1
    Hola @Rimuru Tempest, me sirvio tu ayuda, solo que hizo falta remover la clase anterior por que lo que asi asi era concatenar clases y clases y solo funcionaba una vez Commented el 21 dic. 2019 a las 14:40
  • @sebastianvalencia es verdad, lo siento por no haber prestado atención a ese detalle. Commented el 21 dic. 2019 a las 17:46
1

Creo que el problema es que se añaden dos clases a la vez que cambian la misma propiedad. Es por eso que no vuelve a cambiar el color, porque se queda con el que se le añadió primero.

En lugar de utilizar $input.addClass() podrías utilizar $input.style['background']='red/green'.

Otra cosa que puedes hacer es asegurar que si vale 'F', el input no tenga la clase 'verde' y, cuando valga '1', el input no tenga la clase 'rojo', con $input.classList.remove('verde/rojo') respectivamente.

1
  • Gracias Octavio, pero tampoco funcionó Commented el 21 dic. 2019 a las 3:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.