1

スニペット プロバイダーには、次のことを行う単純な関数があります。

  • 入力フィールドで電子メールを検索し、>> 電子メールを 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コードがあります

4

1 に答える 1

3

を使用できますtoggleClass。このメソッドはブール値を受け入れます。スイッチが の場合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");
});
于 2013-01-04T21:26:20.983 に答える