Question

In the snippet provider there is a simple function which does the following.

• Looks for e-mail in the input field, and>> pushes e-mail to md5 hash, and>> generates a url of a Gravatar which is then embedded into a class via fadeIn();

  $(document).ready(function(){
  
      $('.email').on('change', function(){
          var hash = hex_md5($('.email').val()); 
          $('.gravatar').attr('src', 'http://www.gravatar.com/avatar/' + hash + '?s=120').addClass('gravatar-glow').fadeIn("slow");
      });
  });
  
  
  HTML Part: <img src="" class="gravatar" style="display: none;"/>
  

The problem

• If e-mail is deleted the class is still shown however this time its not using md5 of email but is displaying default Gravatar image.

What I want to achieve is if the input field is empty because say user choose to remove there e-mail to use a different one, I want to hide the class that was previously used instead of displaying a Default Gravatar image.

And here is the jQuery code

Answer 1

You can use toggleClass, this method accepts a boolean value, if the switch is true, class is added otherwise the class is removed.

.toggleClass( className, switch )

$('.email').on('change', function(){
    var val = $.trim(this.value), hash = hex_md5(val); 
    $('#element').prop('src', function(){
         return val.length
                ? 'http://www.gravatar.com/avatar/' + hash + '?s=120'
                : 'default path to the image'
    }).toggleClass('.gravatar', val.length)
      .fadeIn("slow");
});