Вопросы Теги

Cambiar окрашивают cuando cambie el input

Quiero cambiar el color de un input de la siguiente manera:

  • cuando Валга 1 se debe dibujar en verde.
  • cuando Валга F se debe dibujar en rojo.

Имеет к недостаткам ahora sólo lo hace una vez pero lo debería hacer cuantas Лос 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>

Никакой se cómo hacer esto, СИ alguien я puede ayudar lo agradecería mucho, además lo logro en el evento blur y la idea es cuando cambie el input.

0
задан 21.12.2019, 01:50
2 ответа

Только ты нуждаешься в том, чтобы использовать событие change рядом с blur, таким образом: 

$(document).ready(function() {
    $('table :input').on('blur change', function(){
       var $input = $(this);
       if($input.val() === 'F'){
          $input.addClass('rojo'); 
       } else {
           $input.addClass('verde');
       }
    });
});
0
ответ дан 21.12.2019, 12:13
  • 1
    Даже продолжи функционировать равно – sebastian valencia 21.12.2019, 03:36

Я думаю, что проблема что aГ±aden два класса одновременно, которые меняют то же свойство. Именно поэтому он вновь не меняет цвет, потому что он остается, с которым он aГ±adiГі сначала.

Вместо того, чтобы использовать $input.addClass(), podrГ-схвати использовать $input.style['background']='red/green'.

Другая вещь, которую ты можешь делать, состоит в том, чтобы уверять, что, если он стоит 'F', у неудара в лунку нет 'зеленого' класса и, когда он будет стоить '1', у неудара в лунку нет класса 'красный', с $input.classList.remove('verde/rojo') соответственно.

0
ответ дан 21.12.2019, 12:13
  • 1
    Спасибо Октавио, но также funcionó – sebastian valencia 21.12.2019, 05:59