Jak zmienić kolor obramowania wejściowego, z jQuery, w zależności od jego wartości?

Question

Mam pytanie dotyczące jQuery. Mam poniżej kod, który działa dobrze; zmienia się inputborder-color w zależności od jego wartości, która jest wpisana i wprowadzona. Ale jeśli w wartości input na ładowaniu stron nie zmieni się tego border-color. Jak mogę dokonać zmiany border-color od początku, po załadowaniu strony?

Dziękuję :)

<input type="text" class="col" value=""> 


// When the <input>'s value changes 
$("input").change(function() { 

// If the value is less than 7, add a red border 
if ($(this).val() < 7) { 
    $(this).css("border", "5px solid red"); 
} 

// Else if the value is equal to 7, add a green border 
else if ($(this).val() == 7) { 
    $(this).css("border", "5px solid green"); 
} 

// Else if the value is greater than 7, add an orange border 
else if ($(this).val() > 7) { 
    $(this).css("border", "5px solid orange"); 
} 

// Else if the value is anything else, add a black border 
else { 
    $(this).css("border", "5px solid black"); 
} 

}); 

Answer 1

Wystarczy wywołać zdarzenie:

$("input").change(function() { 
    // ... 
}).trigger("change"); 

DEMO:http://jsfiddle.net/9B5SX/1/

Answer 2

bym proponował:

$('input').on('change', function(){ 
    var v = parseInt(this.value, 10); 
    $(this).css('border', function(){ 
     if (v < 7) { 
      return '5px solid #f00'; 
     } 
     else if (v == 7) { 
      return '5px solid #0f0'; 
     } 
     else if (v > 7) { 
      return '5px solid #f90'; 
     } 
     else { 
      return '5px solid #000'; 
     } 
    }); 
}).change(); 

JS Fiddle demo.

Choć szczerze mówiąc, biorąc pod uwagę, że każdysytuacja wydaje się wymagać border-width z 5px i border-style z solid, chciałbym ustawić te części w CSS:

input { 
    border-width: 5px; 
    border-style: solid; 
} 

i po prostu zaktualizować border-color w jQuery :

$('input').on('change', function(){ 
    var v = parseInt(this.value, 10); 
    $(this).css('border-color', function(){ 
     if (v < 7) { 
      return '#f00'; 
     } 
     else if (v == 7) { 
      return '#0f0'; 
     } 
     else if (v > 7) { 
      return '#f90'; 
     } 
     else { 
      return '#000'; 
     } 
    }); 
}).change(); 

JS Fiddle demo.

I wreszcie, po prostu dlatego, że czasami nie mogę się powstrzymać (i podczas tego podejścia może zostać podjęte, to nie jest jeden mogę szczerze polecić ...), z dodatkiem operatorów warunkowych:

$('input').on('change', function(){ 
    var v = parseInt(this.value, 10); 
    $(this).css('border-color', function(){ 
     var v = parseInt(this.value,10); 
     return isNaN(v) ? '#000' : v < 7 ? '#f00' : v == 7 ? '#0f0' : '#f90'; 
    }); 
}).change(); 

JS Fiddle demo.

Odniesienia:

• change().
• on().
• parseInt().

Answer 3

Ten sam numer tutaj. W moim przypadku dane wejściowe były kolumną tabeli i były wyświetlane dla każdego wiersza tabeli. Przy następnym kodzie udało mi się zmienić tylko jeden kolor wejściowy, nie wszystkie, gdy zmieniłem wartość dla jednego.

  $('input[type=number]').each(function() { 

      /* Change border color depending on the input value */ 
      var value = parseInt(this.value, 10); 
      if (value != 0) { 
       $(this).css('border-color', function() { 
        return value ? 0 : '#bfbfbf', '#f32d83'; 

       }); 

      } 
      else { 
       $(this).css('border-color', '#bfbfbf'); 
      } 

     }); 

Nadzieja pomaga