0

Necesito cambiar el color del del texto según el valor del input.

Lo estoy intentando pero el segundo color no me toma siempre prevalece el primero. Ahora lo estoy haciendo con css directo pero podría ser con un nombre de clase usando .addClass y .removeClass, ya lo probé de las dos formas y no lo logro.

Dejo la idea por favor Gracias.

jQuery(document).ready(function() {
    
    if (jQuery('.status').val() === "CANCELADO") {
        jQuery('.status').css("color", "green");
    }

    if (jQuery('.status').val() === "PENDIENTE") {
        jQuery('.status').css("color", "red");
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="status" type="text" value="PENDIENTE" />

El value es un valor dinámico puede ser CANCELADO O PENDIENTE, depende del valor cambiar el color.

1 respuesta 1

0

No estás muy lejos de lograrlo, en la comparación if te falta un else. Edité tu código para agregar la dependencia de jQuery y el snippet funciona cambiando manualmente el value del input.

Te dejo un ejemplo comentado en el código de jQuery. Opté por usar un radio button para hacer el ejemplo más ilustrativo.

//Al hacer click en un estado
$('.estado').click(function(){
  //Capturo el valor del estado
  let estado =$('input:radio[name=estado]:checked').val();
  //Asigno el valor del estado al input
  $('.status').val(estado);
  //Capturo el valor del input
  let status = $('.status').val();
  //Comparo el valor para asignar el color correspondiente
  if (status == 'CANCELADO') {
    $('.status').css("color", "green");
  } else if (status == 'PENDIENTE') {
    $('.status').css("color", "red");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="estado1" name="estado" class="estado" value="CANCELADO">
<label for="estado1"> CANCELADO</label><br>
<input type="radio" id="estado2" name="estado" class="estado" value="PENDIENTE">
<label for="estado2"> PENDIENTE</label><br>
<input class="status" type="text" value="" />

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.