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

不知道是什么导致此错误。 但是，更干净的方法是定义一个color变量并记录该变量颜色：

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