So ändern Sie die Eingabe border-color, jQuery, je nach Wert?
Ich habe eine Frage zu jQuery. Ich habe folgenden code, der gut arbeitet; es ändert input
border-color
je nach Wert, die typisiert und eingetragen. Aber wenn in input
's Wert auf der Seite-laden Sie es nicht ändern, dass border-color
. Wie kann ich machen das border-color
ändern, von Anfang an, folgende Seite zu laden?
Danke 🙂
<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");
}
});
Du musst angemeldet sein, um einen Kommentar abzugeben.
Nur das Ereignis ausgelöst werden soll:
DEMO: http://jsfiddle.net/9B5SX/1/
Ich würde vorschlagen:
JS Fiddle demo.
Obwohl ehrlich gesagt, da jeder situation scheint zu erfordern, ein
border-width
von5px
undborder-style
vonsolid
würde ich jene Teile in der CSS:Einfach und update die
border-color
im jQuery:JS Fiddle demo.
Und, schließlich, nur weil ich manchmal kann mir nicht helfen (und während dieser Ansatz kann genommen werden, es ist nicht ein ich kann ehrlich empfehlen...), mit Hinzugefügt, bedingte Operatoren:
JS Fiddle demo.
Referenzen:
change()
.()
.parseInt()
.else
ist auch nicht erforderlich.NaN
nach derparseInt()
, nie Vertrauen Ihrer Benutzer, nach allem (wenn ich ihn zögern behalten dieelse
aus dem gleichen Grund).NaN
, ich meine, lassen Siereturn '#000'
einfach ohneelse
🙂return
würde nur ausgeführt werden,/auf, wenn keine der anderen Bedingungen erfüllt wurden...Oh Mann, ich sollte gehen, etwas Schlaf zu bekommen... 😀$(document).ready(function (){/* your code in here */});
Gleiche Problem hier. In meinem Fall, war der Eingang einer Tabellenspalte, und es war angezeigt, die für jede Zeile in der Tabelle. Mit dem folgenden code konnte ich ändern, nur einen Eingang Farbe, nicht alle, wenn ich änderte den Wert für einen.
Hoffe es hilft