jquery - 如果输入字段为空，则删除类

Question

在代码片段提供程序中，有一个简单的函数可以执行以下操作。

• 在输入字段中查找电子邮件，>> 将电子邮件推送到 md5 哈希，>> 生成 Gravatar 的 url，然后通过 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;"/>
  

问题

• 如果删除电子邮件，该类仍会显示，但这次它不使用电子邮件的 md5，而是显示默认的 Gravatar 图像。

我想要实现的是，如果输入字段为空，因为假设用户选择删除电子邮件以使用其他电子邮件，我想隐藏以前使用的类，而不是显示默认 Gravatar 图像。

这是 jQuery 代码

Answer 1

您可以使用toggleClass，该方法接受一个 bool 值，如果开关为true，则添加类，否则删除该类。

.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");
});