jQuery $（this）.css（'border-color'）返回旧的边框颜色

Question

为什么以下代码会返回先前更新的边框颜色而不是当前的边框颜色？

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

它完全改变边框颜色，但它不会在浏览器控制台中显示当前更新的边框颜色，而是显示以前更新的边框颜色。

Answer 1

不确定导致此错误的原因。但是，更清晰的方法是定义?tf变量并记录该变量颜色：

color

JsFiddle