kann Eigenschaft 'Farbe' von undefined nicht festlegen

Question

Ich versuche, eine benutzerdefinierte Fehlermeldung und Styling basierend auf Validierung zu erstellen (Ich weiß über Plugins, aber die Zeit mit der Koordination des Validierungs-Plugins mit Materialise ist zu viel für ein einzelnes Feld).

HTML:

<div class="input-field inline center-align"> 
    <input id="quantity" name="quantity" type="number" class=""> 
    <label for="qty" data-error="wrong" data-success="right" 
     class="active">Qty</label> 
    <span id="qty-error">really?</span> 
</div> 

JS:

$('#quantity').change(function(){ 
    var $Qty = $(this).val(); 
    var $Label = $('#qty-error'); 
    if ($Qty > 0 && $Qty <= $AvailTix){ 
     $Label.html('seems reasonable'); 
     $Label.style.color = '#8e8ef5'; 
     $(this).addClass('valid'); 
    } else if ($Qty < 1){ 
     $Label.html('really?'); 
     $Label.style.color ='#f96d63'; 
     $(this).addClass('invalid'); 
    } 
}); 

Was mich ist verwirrend ist, dass das $Label.html Stück arbeitet. Es ändert den Text. Aber ich habe diesen Fehler in der Konsole für die $Label.style.color Linie:

Uncaught TypeError: Cannot set property 'color' of undefined

Answer 1

.style ist Eigentum ein Element. Mit jQuery haben Sie dieses Element im Array. Mehr wie [elem]. So verwenden:

$Label.css('color', '#f96d63'); 

oder

$Label.get(0).style.color = '#8e8ef5'; 

Aber das erste ist mehr jQueryish.

Answer 2

$Label ist ein jQuery-Objekt, kein Standard-Knotenelement, so können Sie entweder tun $Label[0].style.color = '#8e8ef5'; oder $Label.css('color', '#8e8ef5');

Answer 3

versuchen $Label.css({color:'#8e8ef5'});

Answer 4

Ihr Problem ist, dass Sie ein DOM-Eigenschaft style auf einem jQuery-Objekt zuzugreifen versuchen, das ist, warum Sie Cannot set property 'color' of undefined bekam.

In Ihrem Code $Label ist ein Objekt jQuery und hat keine style Eigenschaft, weil .style eine DOM-Objekt-Eigenschaft ist, so dass Sie nicht mit einem jQuery-Objekt verwenden können.

Sie müssen stattdessen .css() Methode verwenden:

$Label.css('color', '#8e8ef5'); 

Für weitere Informationen können Sie jQuery object and DOM element lesen kann.