0

ハックを使用して、ファイルのアップロード入力をブラウザ間で同じように表示しています。秘訣は、基本的にアップロード入力の不透明度をゼロに設定し、その上に通常の入力をカスタム スタイルで配置することです。ユーザーがファイルをアップロードした後、jquery を使用してファイル名の値を取得し、それをその上の入力 (偽の入力) に格納しています。

私のJqueryは次のとおりです。

    var browse = $("#browse");

    $('.wpcf7-file').on('change', function(){
            $('#fakeUpload').val(this.value).css({'background':'#f1f1f1', 'text-indent':'72px'});
            browse.css('backgroundPosition' , '5px -60px');
    });

    $("input.wpcf7-file").hover(function(){
        browse.css('backgroundPosition' , '5px -28px');
    }, function(){
        browse.css('backgroundPosition' , '5px 4px');
    });

ご覧のとおり、ここでは 2 つの処理が行われています。.wpcf7 入力から値を取得し、それを #fakeUpload の値として保存します。div、参照は多かれ少なかれ、アップロードのステータスを示すボタンです。ユーザーがファイルを選択すると、参照ボタンは非アクティブな状態になります。

問題は、ユーザーがこの「非アクティブ状態」になった後、その下のホバー効果がまだアクティブなままであることです。使用者がファイルをアップロードした後 (入力の変更時)、すべてのホバー効果を無効にしたいと考えています。これについて最善の方法は何ですか？

私のhtml/cssを見る必要がある場合はお知らせください。

4

3 に答える 3

1

イベント内でchange、次のようにそのフィールドにクラスを追加できます。

     $('.wpcf7-file').on('change', function(){
        /// you code
        $(this).addClass('inactive');
     });

次に、ホバーのセレクターを変更します

    $("input.wpcf7-file:not('.inactive')").hover(function(){
        browse.css('backgroundPosition' , '5px -28px');
    }, function(){
        browse.css('backgroundPosition' , '5px 4px');
    });

作業サンプル

于 2012-06-01T13:45:48.393 に答える
0

試してみてください：

$("input.wpcf7-file").unbind('mouseenter mouseleave')
于 2012-06-01T13:46:29.117 に答える
0

私はこれがあなたのために働くかもしれないと思います：

var browse = $("#browse");

$('.wpcf7-file').on('change', function(){
        $('#fakeUpload').val(this.value).css({'background':'#f1f1f1', 'text-indent':'72px'});
        browse.css('backgroundPosition' , '5px -60px');
        $("input.wpcf7-file").off("mouseenter ").off("mouseleave")
});

$("input.wpcf7-file").hover(function(){
    browse.css('backgroundPosition' , '5px -28px');
}, function(){
    browse.css('backgroundPosition' , '5px 4px');
});
于 2012-06-01T13:54:44.463 に答える