jQuery $ (this) .css ('border-color') gibt die alte Rahmenfarbe zurück

Question

Warum gibt der folgende Code die zuvor aktualisierte Rahmenfarbe und nicht die aktuelle Rahmenfarbe zurück?

Html:

<li><a href="#" data-target="#signupModal" data-toggle="modal" id="signup"> 
<i class="fa fa-user-plus"></i> Sign Up </a></li> 

jQuery:

$('#signup').click(function() { 

    var count = 0; 

    $('#inputEmail').focusout(function() { 

    if ($(this).val() == '') { 

     count++; 
     $(this).css('border-color', 'red'); 
     console.log('No of times input box focused out: ' + count + ' Current border color: ' + $(this).css('border-color')); 
    } else { 

     $(this).css('border-color', 'green'); 
     console.log(' Current border color: ' + $(this).css('border-color')); 
    } 
    }); 
}); 

Es ändert Grenzfarbe völlig in Ordnung, aber es wird nicht angezeigt, die zur Zeit aktualisiert Randfarbe im Browser-Konsole es eher angezeigt werden die zuvor aktualisierte Rahmenfarbe.

Answer 1

Nicht sicher, was diesen Fehler verursacht. Allerdings wäre mehr sauberer Ansatz eine color Variable zu definieren und protokollieren, die variable Farbe statt:

var count = 0 ; 

$('#inputEmail').focusout (function(){ 
    var color = ""; 

    if ($(this).val() == ''){ 
     count++; 

     color = "red"; /* Update variable */ 
     $(this).css('border-color',color); 

     console.log('No of times input box focused out: ' + count + ' Current border color: ' + color); 

    } else { 

    color = "green"; /* Update variable */ 
    $(this).css('border-color', color); 

    console.log(' Current border color ' + color); 
    } 
}); 

JsFiddle