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");
}

});
InformationsquelleAutor Lasha | 2013-05-18
  1. 10

    Nur das Ereignis ausgelöst werden soll:

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

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

    • Ausgezeichnete Antwort!
    InformationsquelleAutor VisioN
  2. 6

    Ich würde vorschlagen:

    $('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.

    Obwohl ehrlich gesagt, da jeder situation scheint zu erfordern, ein border-width von 5px und border-style von solid würde ich jene Teile in der CSS:

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

    Einfach und update die border-color im 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.

    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:

    $('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.

    Referenzen:

    • +1 Für die Umgestaltung 🙂 Die letzten else ist auch nicht erforderlich.
    • Es ist, wenn der Wert könnte möglicherweise sein NaN nach der parseInt(), nie Vertrauen Ihrer Benutzer, nach allem (wenn ich ihn zögern behalten die else aus dem gleichen Grund).
    • Nein, Nein, ich bin nicht über NaN, ich meine, lassen Sie return '#000' einfach ohne else 🙂
    • Oh! Ich sehe, was du meinst, ja; in diesem Fall die 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... 😀
    • Es ist Zeit für den Eurovision jetzt 😉
    • Naja, schlafen ist es dann! 😉
    • VisioN & David danke für die Antworten... Aber ich habe ein anderes problem... Ihr beide codes arbeiten an der Geige... Aber wenn ich kopieren Sie es auf meine Datei funktioniert nicht... ich eingeschlossen jquery-1.9.1.min.js und alles hat perfekt auf den code aber es funktioniert nicht, trotzdem :((( was soll ich tun???
    • Was ist anders in Ihrer Seite? Ist dein jQuery, eingewickelt in ein $(document).ready(function (){/* your code in here */});
    • David Thomas O mein Gott... Schande über mich :D:D:D:D ja ich vermisste, dass ein Teil :D:D Jetzt ist alles perfekt!!! Ich danke Ihnen sehr!!!

    InformationsquelleAutor David Thomas
  3. 1

    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.

             $('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');
             }

         });

    Hoffe es hilft

    InformationsquelleAutor Berintan Anca
Schreibe einen Kommentar